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“交互 界面 设计 "是 为 培养 既 具 有 艺术 设计 所 必 备 的 基本 知识 和 专业 素养 、 实 践 能 力 、 创 新 设计 能 力 ， 
又 具备 逻辑 分 析 能 力 、 综 合 设计 能 力 、 动 手 创新 能 力 的 专业 课程 。 

本 书 按照 高 等 学 校 艺术 学 科 本 科 专 业 规范 、 培 养 方案 和 课程 教学 大 纲 的 要 求 ， 合 理 定位 。 由 长 期 在 
教学 第 一 线 从 事 教学 工作 、 富 有 教学 经 验 的 教师 根据 21 世纪 艺术 设计 学 科 发 展 的 需要 ， 以 科学 性 、 先 进 
性 、 系 统 性 和 实用 性 为 目标 进行 编写 ， 以 适应 不 同类 型 、 不 同 层次 的 学 校 教学 的 需要 。 
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生 必 修 的 一 门 专业 主干 课程 ， 也 是 所 有 艺术 类 去 业 朋 前 普遍 开设 的 一 门 课程 。 

Et 和 
具 科技 性 和 艺术 性 的 一 门 专业 课 各 庆 备 这 角 晶 。 据 最 新 的 统计 资料 显示 ， 目 前 国 
内 不 仅 正规 的 设计 院 校 开设 术 课 种、 计算机、 信息 关 学 科 也 开设 相关 课程， 就 
人 数 乏 年 增长 。 交 互 办 本 设计 是 一 门 交 又 性， 综合 性 较 强 的 课程， 它 涵养 了 计算 
naa. emas WW, Eu. m 2 A TO 
EZ. 为 E A aiik, W 
应 Q stop ka NZ 

/ 交 返 界面 设计 不 同 于 一 般 浆 艺 术 设 计 ， 它 是 一 门 艺术 与 科学 的 交叉 性 学 科 
N SSS Rk, 1 wana umamainapppx 4006nenss 
表达 能 力 以 及 勇 二 创新、 动手 实践 的 能 力 ， 这 在 艺术 设计 教育 中 就 必须 要 有 一 个 
观念 的 革新 ， 在 设计 实践 中 有 所 创新 。 要 做 到 这 些 ， 要 求学 生 对 交互 界面 设计 的 
基础 理论 有 一 个 系统 的 理解 ， 并 以 实践 来 检验 理论 知识 的 掌握 情况 。 

通过 本 课程 的 学 习 ， 学 生 将 掌握 基本 的 交互 设计 原则 、 视 觉 表 现 手 法 、 交 互 
界面 设计 流程 ， 获 得 丰富 的 基础 知识 , 然后 通过 第 五 章 、 第 六 意 的 学 习 和 创新 实 
践 过 程 实现 从 理性 知识 到 指导 实践 的 飞跃 。 

本 书 既 系统 介绍 了 交互 界面 设计 的 基础 理论 ， 又 在 某 些 实践 令 域 提出 了 解决 
间 题 的 方法 ， 能 够 帮助 读者 深入 理解 交互 界面 设计 的 理念 ， 掌 握 设计 方法 和 技 
巧 ， 创 造 出 有 价值 的 用 户 体验 产品 。 
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本 书 注重 学 生 获 取 知 识 、 分 析 问题 与 解决 艺术 设计 问题 能 力 的 培养 ， 而 且 力 
求 体现 注重 学 生 艺 术 素质 与 创新 思维 能 力 的 培养 。 为 此 ， 在 本 书 的 编写 上 既 要 体 
现 现代 设计 技术 、 艺 术科 学 、 艺 术 思 维 的 密切 交叉 与 融合 ， 又 要 体现 艺术 设计 的 
历史 传承 和 发 展 趋势 。 本 书 在 内 容 的 选择 和 编写 上 具有 如 下 特点 。 

(1) 注重 培养 艺术 设计 类 专业 学 生 的 创新 思维 能 力 ， 强 调 改 变 观 念 就 能 获得 
新 的 创作 灵感 的 观点 ， 力 求 通过 树立 交互 设计 的 “以 用 户 为 中 心 ”的 设计 方法 来 
指导 学 生 的 设计 。 

(2) 本 书 力求 把 现代 设计 艺术 与 科学 思维 方式 结合 起 来 ， 强调 艺术 设计 专业 

学 生 应 该 既 具 备 高 超 的 设计 技能 ， 又 具备 全 面 、 丰富 的 美学 素养 第 入 s 章 是 编者 
近年 来 指导 学 生 所 做 的 案例 ， 具 有 较 强 的 实践 性 。 
G) 在 内 容 的 选择 和 安排 上 ， 既 系统 又 重点 突出 ， eman ta aaa 

立 ， 以 便 适 应 不 同 专业 、 不 同学 习 背 景 、 不 同学 时 击 同 良 次 的 学 生 选用 。 

(4) 为 了 加 深 学 生 对 课程 内 容 的 理解 ， 认 操 和 巩固 所 学 的 知识 ， 每 章 后 附 有 
习题， 供 学 生 学 完 相 关内 容 后 及 时 进行 消化 和 复习 。 

(5) 本 书 结构 合理 、 内 容 期 实 < 案例 经 典 、 ECHEN < 通俗 易 懂 、 突出 实 
用 性 ， 以 及 设计 步 又 、 知识 和 技能 的 应 用 组 合 训 统 ， RRS 
联系 。 入 x 

Pe ñE JLE ta Rinri k n * 数 这 媒体 设计 、 工业 设计 的 学 生 习 作 。 

在 本 忆 的 编写 过 程 中 ， 吸收 了 许多 教师 对 编写 工作 的 宝贵 意见 ， 参 考 和 引用 

了 一 些 教材 中 的 部 分 内 容 和 插图 ， 均 已 列 于 书后 参考 文献 ， 在 此 对 有 关 作者 表示 
瑞 心 的 感谢 。 

由 于 编者 水 平 有 限 ， 时 间 仓 促 ， 加 之 目前 国内 在 交互 界面 设计 上 的 研究 和 应 

用 还 处 于 发 展 阶段 ， 本 书 中 难免 会 有 错误 和 不 足 ， 圳 心 希望 广大 读者 批评 指正 。 
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交互 设计 师 做 些 什么 
成 为 一 名 交互 设计 师 { } 
学 好 交互 设计 的 建议 


创新 思维 培养 


良好 交互 设计 的 本 质 是 ， 设 计 的 交互 能 让 使 用 者 在 不 影响 个 人 目标 的 情况 下 ， 达 到 Ó 


T 他 们 的 实际 目标 。 
a 一 一 阿兰 。 Ẹ3h (Alan Cooper) ! 








11 什么 是 交互 设计 


1.1.1 交互 设 计 的 发 展 

交互 设计 真正 被 人 们 作为 研究 对 象 应 该 是 在 计算 机 出 现 之 后 。 人 类 历史 上 第 一 台电 子 
计算 机 (ENIAC) 是 在 1946 年 由 美国 宾夕法尼亚 大 学 发 明 ， 到 现在 使 用 的 计算 机 以 来 ， 电 
子 计算 机 经 历 了 第 1 代 电 子 管 数字 机 (1946—1958 年 ) ， 第 2 代 晶 体 管 数字 机 (1958—1964 
年 ) ， 第 3 代 集 成 电路 数字 机 (1964 一 1970 年 ) ， 第 4 代 大 规模 集成 电路 机 (1970 年 至 今 ) 
四 个 时 期 ， 如 图 1.1 所 示 。 














第 3 代 集 成 电路 数字 机 第 4 代 大 规模 集成 电路 机 


图 1.1 1-4 代 计算 机 图 示 


但 是 在 计算 机 发 展 的 最 初 阶段 ， 交 互 设计 这 门 学 科 并 未 引起 人 们 的 注意 ， 
Els El 直到 计算 机 发 展 越 来 越 成 熟 ， 普 及 率 越 来 越 高 ， 一 些 新 的 创新 成 果 出 现 后 ， 
交互 设计 才 真正 开始 了 它 的 历史 发 展 篇 章 。 伴 随 着 计算 机 发 展 过 程 ， 从 1929 
年 至 今 交 互 设计 也 经 历 了 四 个 阶段 的 发 展 ， 分 别 为 初创 期 、 黄 基期 、 发 展期 
计算 机 的 诞生 。 ”和 提高 期 ( 见 表 1-1) 。 

















表 1-1 计算 机 发 明 各 阶段 时 间 及 事件 
时 间 事 件 
1959 年 ， 美 国学 者 B. Shackel 提供 了 人 机 界面 的 第 一 篇 文献 《关于 计算 机 控制 台 设 
计 的 人 机 工程 学 》 
初创 期 1960 年 ，LikliderJCK 首次 提出 “人 机 紧密 共 栖 ”的 概念 ， 被 视 为 人 机 界面 的 启蒙 
(1929 一 1969 年 ) 观点 
1969 年 ， 召 开 了 第 一 次 人 机 系统 国际 大 会 ， 同 年 第 一 份 专业 杂志 “国际 人 际 研究 
(UMMS) ”创刊 
m 从 1970—1973 年 出 版 了 四 本 与 计算 机 相关 的 人 机 工程 学 专著 
(1970—1979 年 ) 1970 年 成 立 了 两 个 HCI 研究 中 心 : 一 个 是 英国 的 Loughborough 大 学 的 HUSAT 研 
究 中 心 ， 另 一 个 是 美国 Xerox 公司 的 PaloAlto 研究 中 心 

理论 方面 ， 从 人 机 工程 学 独立 出 来 ， 更 加 强调 认 知心 更 学 ; 行为 学 和 社会 学 等 学 科 
a 的 理论 指导 KA 
(1980 一 1995 年 ) | 实践 范畴 方面 ， 从 人 机 界面 拓 延 开 来 ， 强调 计算 标本 于 人 的 反馈 交互 作用 。“ 人 机 

界面 ”一 词 被 “人 机 交互 ”所 取代 。HCL 中 的 “I"， 也 由 Interface (界面 /接口 ) 
变 成 了 Interaction (交互 ) , Xo 
提高 期 人 机 交互 的 研究 重点 放 到 了 智能 化 交 丈 -| 多 模 态 (多 通道 ) 一 多 媒体 交互 、 虚 拟 交 
(1996 年 至 今 ) 互 及 人 机 协同 交互 等 方面 ， 也 就 是 “以 从 为 中 心 ”的 人 机 交互 技术 方面 









































i 此 时 ， 交 互 设计 迅速 发 国 
展 ， 这 得 蔡 于 个 人 电脑 的 发 展 和 互联 网 的 出 现 。 个 人 电脑 的 发 展 推动 了 图 形 
界面 (Graphic User Interface, GUI) ` 的 发 展 (第 三 章 将 会 YH GUI 的 发 展 历 
程 ) ，GUI 让 人 与 计算 机 的 交友 寺 程 变 得 让 富 而 有 趣 。 在 联 网 的 出 现 改变 ; 
人 们 的 生活 ， 带 给 人 们 无 限 可 能 ， 互联 网 通过 交互 设计 给 给 人 们 提供 了 网 上 办 Raat 
公 、 网 上 学 习 、 网 上 购物 、 网 上 交友 、 网 上 娱乐 等 各 种 活动 。 伴 随 计算 机 重 
要 性 的 提升 及 网 络 用 户 量 的 迅速 增长， 用 总 半生 算 机 软件 和 硬件 的 需求 也 越 来 墟 复 末 。 计 算 
机 界面 的 设计 应 该 能 够 满足 不 同人 群 需求 ， 术 到 操作 方便 、 视 觉 效 果 舒 适 的 目标 。 

在 交互 说 计 的 提高 期 ， 蕴 果 iPhone 知 能 手机 的 出 现 其 履 了 传统 的 手机 概念、 移动 电话 
与 电脑 结合 预示 着 手机 智能 时 代 的 来 临 ， 移 动 设备 将 人 们 从 桌面 PC 端 带 到 了 随处 可 获取 信 
息 的 手机 端 ， 交 互 设计 的 方式 也 从 鼠标 改 为 手指 来 发 号 施 令 。Google 眼镜 、 实 体 桌面 操作 系 
Si WRK (VR) 、 增 强 现实 (AR) 、 智 能 家 居 等 的 发 展 ， 拓 展 了 交互 设计 的 领域 ， 使 人 
们 生活 的 每 个 角落 随处 都 有 交互 设计 的 身影 。 


1.1.2 ”交互 设计 的 概念 

1. 交互 设计 的 定义 

交互 设计 作为 一 门 关 注 交 互 体验 的 新 学 科 ， 产 生 于 20 世纪 80 年 代 ， 它 由 比尔 * 摩 格 理 
吉 (Bill Moggridge) 在 1984 年 的 一 次 设计 会 议 上 提出 ， 他 一 开始 给 它 命名 为 “ 软 面 ”(Soft 
Face) ， 由 于 这 个 名 字 容 易 让 人 想起 和 当时 流行 的 玩具 “ 椰 菜 娃娃 ”(Cabbage Patch Doll) , 


后 来 他 又 将 其 更 名 为 Interaction Design， 即 交互 设计 。 交 互 设计 ， 又 称 互动 设计 (英文 
Interaction Design, IxD 或 者 IaD) 
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所 谓 交互 ， 用 一 句 中 国 俗语 说 就 是 “有 来 有 往 ， 来 而 不 往 非礼 也 ”。 也 就 是 说 ， 用 户 发 
出 信号 或 指令 给 产品 ， 产 品 要 能 接受 指令 ， 正 确 完成 指令 并 告知 用 户 。 例 如 ， 对 绝 大 多 数 用 
户 而 言 ， 可 能 根本 不 了 解 电路 的 基本 知识 ， 也 没 时 间 、 没 兴趣 、 没 必要 去 了 解 ， 而 对 于 设计 
师 而 言 ， 就 是 要 满足 用 户 的 使 用 需求 ， 将 功能 模块 化 ， 变 成 产品 上 的 “ 眼 、 耳 、 鼻 、 路 " 。 

交互 设计 作为 一 门 较 新 兴 的 学 科 ， 还 在 发 展 中 ， 对 其 理解 也 存在 不 同 的 认识 观点 。 

微软 学 术 是 这 么 定义 交互 设计 的 : 在 设计 中 ， 人 机 交互 与 软件 开发 、 交 互 设计 通常 缩写 为 
ID, wamak sayas 环境 、 系 统 和 服务 的 实践 .” 像 其 他 设计 领域 一 样 ， 交 互 
设计 也 会 关注 形式 ， 但 它 的 主要 关注 点 在 行为 上 。 交 互 设计 将 事物 综合 起 来 并 想象 事物 可 能 的 面 
tne i p stim nt 

艾 伦 . 库 伯 (Alan Cooper) 等 人 (2007) 出 版 的 《About Face 3: 交互 设计 精 医 》 一 书 中 
对 交互 设计 的 理解 是 ， 交互 设计 是 数字 产品 、 环 境 、 系 统 和 服务 的 交互 设 计 实 践 。 和 其 他 设 
计 学 科 一 样 ， 交 互 设计 是 关于 外 形 和 形式 的 。 然 而 ， uwana 统 设计 不 太 涉及 的 
领域 ， 即 行为 的 设计 。 
美国 设计 师 Jon Kolko 的 《交互 设计 沉思 录 》 是 这 样 Sa 交互 设计 并 非 一 
定 就 是 指 创建 网 站 或 应 用 程序 ， 也 不 一 定 就 是 指 多 媒体 设计 或 GUI 设计 ， 其 至 连 其 主要 关注 

点 才 不 一定 能 是 先 进 的 科技 (尽管 有 些 技术 在 其 中 扮演 

重要 的 角色) 如果 要 给 交 五 设计 下 一 个 更 为 恰当 、 哪 

是 有 些 学 术 味道 的 定义 ， 那 么 这 个 定义 就 需要 体现 领 
RALAS, 并 能 各 这 个 激动 人 心 的 领域 做 出 对 
未 来 的 展望 。 rizez, 是 在 人 与 产品 、 系 统 或 服 
N 务 之 间 创 建 的 一 系列 对 话 。 从 本 质 上 讲 ， 这 种 对 话 天 既是 
实体 上 的 ， 也 是 情感 上 的 ， 它 能 随 着 时 间 的 推移 ， 体 现 
在 形式 、 功 能 和 科技 之 间 的 相互 作用 当中 。 

交互 设计 涉及 的 学 科 有 符号 学 、 平 面 设计 、 信 息 架 
构 设计 全 用户 界面 设计 、 游 戏 设计 、 网 站 设计 等 (图 1.2) 。 
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交互 设计 的 方法 众多 ， 主 要 分 为 以 用 户 为 中 心 的 设计 方法 (User Centered Design, UCD) 
和 以 任务 为 中 心 的 设计 方法 (Task Centered Design，TCD) 。 以 用 户 为 中 心 的 设计 方法 是 指 
“让 用 户 参与 整个 项 目 开发 过 程 ”。 只 有 用 户 才 是 产品 成 功 与 否 的 最 终 评判 者 。 以 任务 为 中 心 
的 设计 方法 是 关注 任务 实现 ， 不 关注 用 户 的 偏好 。 在 设计 过 程 中 ， 设 计 师 可 以 根据 项 目的 内 
容 与 特点 来 决定 偏重 于 哪 一 种 方法 。 

以 用 户 为 中 心 的 设计 方法 强调 对 用 户 的 研究 ， 从 用 户 的 需求 出 发 ， 在 项 目的 不 同时 期 都 
会 要 求 有 用 户 的 参与 。 在 本 书 第 二 章 中 我 们 将 专门 介绍 该 设计 方法 。 

3. 交互 设计 的 类 型 
[s]#”2 [s] 广义 的 交互 设计 ， 是 指 人 与 人 、 人 与 物 、 物 与 物 之 间 发 生 的 事情 。 人 与 

人 之 间 的 交互 指 人 们 之 间 相 互 交流 ， 共 同 完成 一 件 事情 ， 如 购物 、 讲 课 听课 、 
踢 足 球 等 ， 人 与 物 之 间 的 交互 ， 是 指 人 通过 使 用 产品 产生 的 系列 交互 过 程 ， 
如 使 用 洗衣 机 、 智 能 手机 、 遥 控 设 备 等 ， 物 与 物 之 间 的 交互 ， 是 指 其 自动 
未 来 就 在 我 中 省 。 化 发 生 的 系列 事情 ， 如 自动 流水 线装 配 、 程 序 内 部 运行 等 。 目 前 来 说 交互 
























































Taa! 
° 
设计 常用 在 互联 网 Web 设计 、 移 动 APP 设计 、 基 于 图 形 界面 的 人 机 软件 中 。 本 书 主要 从 pa: 
基于 屏幕 的 设计 来 谈 交 互 设计 ， 如 常见 于 Web 设计 、APP 设计 、 游 戏 设计 中 (图 1.3) 。 s: 
章 

fotolia - 





1.1.3” 认 知 摩擦 


1. 生活 中 的 不 良 设 计 

因 上 日 常生 活 中 的 三 些 物品 设计 对 用 户 的 体验 感受 考虑 不 够 充分 ， 给 我 们 的 生活 带 来 诸多 
不 便 。 图 1 汉中 左 图 是 垃圾 桶 的 可 回收 和 不 可 回收 分 类 ， 但 在 生活 中 人 个 并 不 大 清楚 哪 
些 物 品 属于 可 回收 范围 内 ， 哪 些 物品 属于 不 可 回收 范围 内 ， 所 以 这 会 让 人 们 在 第 一 时 间 产 生 








立 圾 桶 上 较为 直观 地 用 图 示 说 明了 垃圾 的 分 类 范围 ， 这 样 的 
式 首先 做 到 了 一 目 了 欠 又 更 加 细 化 了 垃圾 的 分 类 。 









在 我 们 等 待 网 页 加 载 的 时 候 都 会 出 来 一 些 Loading 的 字样 提示 我 们 等 待 ， 但 是 漫长 的 等 
待 让 人 着 急 ， 如 果 有 等 待 时 间 显示 或 许 我 们 的 心情 就 不 会 那么 焦躁 了 ， 如 图 1.5 所 示 。 
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2. 认 知 摩擦 的 概念 
从 工业 时 代 (1881—1935 年 ) 到 信息 时 代 (19 世纪 七 八 十 年 代 至 今 ) ， 我 们 接触 和 到 了 计 
算 机 、 人 造 卫 星 、 宇 宙 飞 船 ; 机 器 人 、 互 联网 等 一 系列 新 兴 事 物 ， 在 日 常 工作 中 使 用 软件 
的 时 间 增 多 ， 智 能 手机 也 与 我 们 的 日 常生 活 密 切 相 关东 但 是 我 们 并 没有 因为 计算 机 的 速度 
快 、 能 力 强 而 提高 工作 效率 z 相反 ， 有 时 候 我 们 的 效率 反而 降低 了 ， 失 望 、 诅 起 之 感 也 伴随 
而 来 。 出 现 这 一 问题 ， 并 不 是 今天 的 工程 师 k 忆 设计 大 员 不 如 以 前 了 ， 而 是 存在 “ 认 知 摩擦”。 
认 知 摩擦 的 概念 是 由 艾 伦 、 库 伯 最 早 提出 来 的 二 他 对 其 解释 是 “ 当 人 类 智力 遭遇 随 问题 变化 
而 变化 的 复杂 条 统 规则 时 遇 到 的 阻力 * 。 他 还 谈 道 :“ 软 件 交互 的 认 知 摩 氛 度 很 高 “在 电脑 
屏幕 上 ， 所 有 东西 都 充满 了 认 知 摩擦 ”"”“ 几 平 
| P e@e an 所 有 的 交互 设计 都 涉及 行 为 、 切 能 的 选择 、 信 

4 息 ， 以 及 向 用 户 展示 信息 的 方式 " 。 


KIE + 库 伯 在 1999 年 出 版 的 《交互 设计 


















w 用 户 
设计 人 员 之 路 》 中 提出 了 “交互 设计 ”的 概念 。 他 认 
为 ,计算 机 和 人 类 之 间 的 沟通 需要 经 过 设 
系统 表象 计 ， 这 个 设计 遵循 “使 用 者 第 一 、 硅 片 第 二 ” 











的 原则 ， 在 计算 机 的 实现 模型 和 用 户 的 心智 
模 间 ， 建 立 第 三 种 模型 : 表现 模型 。 表 
现 模型 越 接近 于 心智 模型 ， 则 程序 越 容 易 使 上 
和 被 理解 (图 1.6) 。 























F | 
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1.2 ”交互 设计 的 流程 


交互 设计 的 流程 可 以 分 为 设计 研究 、 原 型 制作 、 设 计 评 估 三 个 阶段 (图 1.7) 。 这 三 方面 * 
的 具体 内 容 将 在 “以 用 户 为 中 心 的 设计 ”一 章 中 结合 案例 进行 详细 介绍 。 z 
界 
确立 用 户 需求 面 
lz 
计 
概 
概念 设计 设计 评估 
方案 原型 化 





1.2.1 设计 人 研究 

设计 研究 包括 确立 用 户 需 求 、 概 念 设计 等 内 容 ， 使 用 观察 法 、 用 户 访谈 法 、 问 卷 调研 
进行 用 户 调研 、 任 务 分 析 、 数 据 分 村 过 达到 明确 用 户 需求 及 系统 功能 的 目的 。 
受 计 前 期 阶段 重要 的 内 容 ， 是 整个 设计 的 基础 ， 决 定 了 后 期 设计 的 方向 。 
1.2.2 ”原型 制作 

交互 设计 中 的 原型 制作 很 重要 ,而 且 在 一 个 交互 设计 过 程 中 不 仅 制作 一 个 原型 。 原 型 的 
目的 是 把 前 部 分 的 设计 研究 内 容 具 体 化 、 实 物化 ， 以 便 为 产品 的 最 终 实 现 而 进行 更 好 的 修 
改 、 评 估 。 纸 上 的 原型 是 对 设计 思维 的 呈现 ， 便 于 对 设计 想法 、 设 计 过 程 进行 检查 。 原 型 一 
般 分 为 低 保 真 和 高 保 真 两 种 类 型 ， 使 用 的 工具 也 很 未 富 。 后 面 章节 进行 详细 介绍 。 

1. 低 保 真 原型 


低 保 真 原 型 制作 不 宜 太 复杂 ， 目 的 是 以 快 






设计 研究 是 












速 而 便捷 的 形式 展现 设计 初期 的 想法 构思 。 原 
型 是 一 个 不 断 更 新 迭代 的 阶段 ， 低 保 真 原型 最 


便捷 的 方式 是 在 纸 上 画 原型 图 或 以 拼 贴 的 方式 
来 制作 ， 如 图 1.8 所 示 。 

2. 高 保 真 原型 

高 保 真 原型 是 在 低 保 真 原型 通过 不 断 迭 代 
之 后 形成 的 。 高 保 真 原型 主要 用 来 检验 系统 中 
的 信息 设计 、 交 互 设计 及 视觉 设计 的 细节 ， 所 
以 也 是 最 接近 最 终 版 本 的 。 AI 
1.2.3 设计 评估 

评估 是 为 了 进一步 检验 设计 实现 的 合理 性 及 用 户 体 缮 
过 程 ， 许 多 深层 次 的 问题 在 设计 过 程 中 较 难 显现 ， 需 要 
可 以 组 织 用 户 进行 测试 评估 ， 观 察 其 操作 使 用 系统 
个 交互 设计 的 成 败 。 











的 低 保 真 原型 


。 交 互 设计 是 一 个 较为 复杂 的 
织 专门 的 设计 评估 才能 发 现 。 
过 程 。 设 计 评 估 是 否 有 成 效 ， 将 决定 整 
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13 ”交互 设计 涉及 的 学 科 范 畴 


在 交互 设计 中 ， 人 与 产品 和 人 与 人 之 间 通 过 多 个 感觉 
通道 进行 交互 ， 开 发 过 程 涉及 各 学 科 开 发 人 员 的 协作 ， 这 些 bE @e 
决定 了 交互 设计 具有 多 学 科 交叉 的 特点 。 它 所 涉及 的 学 科 包 


16; 认 知 心理 学 、 计 算 机 科学 、 工 业 设计 、 图 形 设计 、 软 件 E @ e 

工程 学 、 人 类 学 、 美 术 学 、 人 机 工程 学 等 ， 如 图 L9 所 示 。 
G) 用 户 界面 设计 : 在 人 和 机 器 的 互动 过 程 中 ， 有 = 

一 个 层面 ， 即 我 们 所 说 的 界面 。 从 心理 学 意义 来 划分 ， ka 


界面 可 分 为 感觉 (包括 视觉 、 触 觉 、 听 觉 等 ) 和 情感 两 个 
层次 。 用 户 界面 设计 是 屏幕 产品 的 重要 组 成 部 分 。 @ 


(2) 认 知 心理 学 : 认 知 心理 学 是 20 世纪 50 年 代 中 

期 在 西方 兴起 的 一 种 心理 学 思潮 ， 是 作为 人 类 行为 Mgr 

的 心理 机 制 ， 其 核心 是 输入 和 输出 之 间 发 生 的 内 部 心理 

程 。 认 知 如 同 信息 加 工 ， 包 括 感觉 输入 的 变换 、 简 约 : 存储 和 使 用 的 全 过 程 。 认 知心 
理学 研究 人 的 视觉 、 听 觉 、 触 觉 等 感觉 器 官 DR 
息 ， 才 能 设计 出 合适 的 交互 方式 ， 来 使 人 们 轻松 愉快 地 接收 你 要 提供 的 信息 。 

G) 人 机 交互 : 是 一 门 研究 系统 与 AAZ 之 间 的 交互 关系 的 学 科 ， 人 机 交互 界面 通常 是 指 
用 户 可 见 的 部 分 。 用 户 通过 人 机 交互 究 面 号 系统 交流 ， 并 进行 操作 。 人 机 交互 界面 的 设计 要 
包含 用 户 对 系统 的 理解 ( 即 心智 pada sayas; 2 te > 

(4) 计算 机 科学 :计算 机 科学 de 各 种 象 和 规律 的 科学 ， 亦 即 研究 
计算 机 系统 结构 、 程 序 系统 《( 即 软件 ) 、 人 工 智能 及 计算 本 身 的 性 质 和 问题 的 学 * 科 。 计 算 机 
科学 是 s 样 与 计算 和 信息 处 理 相关 a 从 抽象 的 算法 分 析 、 形 式 
化 语法 等 a e 程序 这 、 软 件 和 硬件 等 。 人 机 交互 则 是 专注 于 怎 
样 使 计算 忆 变 得 有 用 、 好 用 。 D 

(5) 软件 工程 学 : 软件 工程 是 研究 、 设 计 、 开 发 和 测试 操作 系统 软件 、 编 译 器 及 用 于 医 
疗 、 工 业 、 军 事 、 通 信 、 航 空 航天 、 商 业 、 科 学 和 通用 计算 应 用 的 网 络 分 发 软件 。 

(6) 人 机 工程 学 ， 人 机 工程 学 是 应 用 人 体 测量 学 、 人 体力 学 、 劳 动心 理学 等 学 科 的 研究 
方法 ， 对 人 体 结构 特征 和 机 能 特征 进行 研究 ， 提 供 人 体 各 部 分 的 尺寸 、 重 量 、 体 表面 积 及 人 
体 各 部 分 在 活动 时 的 相互 关系 和 可 及 范围 等 人 体 结构 特征 参数 ， 探 讨 人 在 工作 中 影响 心理 状 
态 的 因素 及 心理 因素 对 工作 效率 的 影响 等 (图 1.10). 2 

(7) 工业 设计 : 工业 设计 是 指 以 工学 、 美 学 、 经 济 学 为 基础 对 工业 产品 进行 的 设计 活动 。 
设计 师 主要 负责 产品 的 外 观 造型 、 色 彩 等 美学 设计 。 

(8) 平面 设计 : 平面 设计 也 称 为 视觉 传达 设计 ， 是 以 “视觉 ”作为 沟通 和 表现 的 方式 ， 
通过 多 种 方式 来 创造 并 结合 符号 、 图 片 和 文字 ， 设 计 出 用 来 传达 想法 或 讯息 的 视觉 表现 。 平 
面 设计 是 交互 设计 的 一 个 重要 方面 。 


















D ” 必 应 词典 http: //www.bing.com/knows 
© ” 必 应 词典 http; //www.bing.com/knows 
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图 1.10 人 的 坐姿 名 比例 示意 图 ， 触 屏 手势 示意 图 


14 成 为 一 名 交互 设计 师 


N NJ 人 
1.4.1 交 玉 设计 师 做 些 什么 , X mannar 
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ZA N 
交互 设计 是 指 设计 师 对 产品 与 它 的 使 用 者 之 间 的 互动 机 制 进行 分 析 、 预 测 、 定 义 、 规 
划 、 描 述 和 探索 的 过 程 ， 即 定 义 人 造物 的 行为 为 式 窑 开设 计 师 则 是 和 系 以 用 户 为 中 心 的 设 
计 理念 ， 以 用 户 体验 度 为 原则 ， AE ÉRE 并 开展 设计 的 工作 人 员 。 卫 交互 设计 师 
的 工作 内 容 是 以 用 户 体验 度 为 原则 ,、 upas 向 和 功能 设计 产品 的 界面 原型 (包括 交互 流 
e. PLID248 DC. 界面 布局 等 )eXC AN、 
交互 设计 师 的 日 常 工作 包括 : 咨 广 访 谈 、 现 场 研究 : 关税 风暴 、 撰 写 文档 、 制 作 原型 及 
产品 测试 。 交 克 设计 师 应 其 备 蒋 好 的 人 文 素养、 _ 表 适 能 力 、 沟 通 交 流 能 力 、 文字 表达 能 力 、 
EE., 创作 能 力 、 > 定 的 编程 能 力 。 








二 设计 的 建议 K> 
E A A i 
(1) 具备 较为 完善 的 知识 结构 ， 既 有 较 好 的 人 文 素养 ， 又 有 科学 严密 的 逻辑 思维 。 让 自 





己 成 为 一 个 知识 面 较 全 的 综合 型 人 才 。 

(2) 定期 了 解 最 新 资讯 ， 并 记录 下 来 ， 写 一 些 相关 的 随笔 与 心得 。 随 身 准 备 一 个 笔记 本 ， 
随时 记录 灵感 。 

(3) 养 成 多 观察 、 多 听 、 多 想 的 好 习惯 ， 观 察 身边 的 朋友 是 如 何 使 用 产品 的 ， 哪 些 交互 
是 好 的 体验 ， 哪 些 交互 设计 还 存在 不 足 。 多 听 听 他 人 对 产品 的 评价 ， 多 想 想 原因 ， 养 成 站 在 
用 户 的 角度 思考 问题 的 习惯 。 

(4) 对 前 沿 资讯 和 新 的 产品 充满 好 奇 心 ， 多 尝试 、 多 体验 ， 用 心 体验 每 一 个 操作 过 程 。 

) 培养 沟通 能 力 及 与 团队 合作 的 能 力 ， 很 多 时 候 交 互 设 计 并 不 是 一 个 人 可 以 单独 的 工 

作 ， 而 是 需要 各 方面 如 程序 员 、 用 户 、 视 觉 设 计 师 等 相互 配合 的 工作 ， 所 以 注重 沟通 协调 能 
力 的 培养 ， 对 交互 设计 工作 的 开展 将 更 有 帮助 。 

(6) 有 必要 了 解 一 些 编程 的 技巧 ， 能 够 识别 普通 代码 并 进行 修改 或 动态 效果 制作 。 





















































D 互动 百科 http: //www.baike.com/wiki 





= 
k 


2 | 38 


38 E SE SE mr 


FEEN 


知识 拓展 一 ， 了 解 一 些 职位 

1. 项 目 经 理 

项 目 经 理 (Project Manager, PM) ， 项 目 经 理 是 为 项 目的 成 功 策划 和 执行 负 总 责 的 人 ， 
是 项 目 团队 的 领导 者 。 项 目 经 理 首 要 的 职责 是 在 预算 范围 内 按时 优质 地 领导 项 目 小 组 完成 全 
部 项 目 工作 内 容 ， 并 使 客户 满意 。 为 此 ， 项 目 经 理 必须 在 一 系列 的 项 目 计 划 、 组 织 和 控制 活 
动 中 做 好 领导 工作 ， 从 而 实现 项 目 目标 (图 1.11)。™ 

2. 产品 经 理 


产品 经 理 (Product Manager，PD) 就 是 企业 中 专门 负责 产 
品 管理 调查 并 根据 用 户 的 需求 ， 确 定 开发 何 种 产品 ， 选 择 何 种 
技术 、 商 业 模 式 等 内 容 的 职位 。 产 品 经 理 推动 相应 产品 的 开发 
组 织 ， 根 据 产品 的 生命 膨 期， 协调 研发 《党 销 、 运 营 等 ， 确 定 
和 组 织 实施 相应 的 产品 策略 ， 以 尖 尖 他 一 系列 相关 的 产品 管理 











图 1.11 项 目 经 理 


活动 。” a 

3. UI 设计 师 * 4 Ñ 

UI 设 计 师 (User Interface Designer, Aa 负责 应 用 程序 的 视觉 设计 和 交互 模拟 。 
UI 设 计 师 的 涉及 范围 包括 商用 平面 设计 、?1 页 设计 、 移 动 应 用 界面 设计 及 部 分 包装 
设计 。 <S 

; = XS AW 
知识 拓展 二 ， 人 物 简介 -7 3 
rYA x Bai 

(1) 唐 ， 诺 曼 (Don Norman, f] 1.12), JW 认 人 科学 、 人 因 工 程 等 设计 领域 的 著名 学 
者 ， 他 的 经 典 著作 《日 常 物品 的 设计 》 将 易 用 性 和 能 性 的 设计 置 于 美学 之 上 ， 并 曾 被 《 商 
业 周刊》 杂志 评选 因 世纪 最 有 影响 力 的 设 评 师 之 一 。 

(2) 艾 库 伯 (Alan Cooper， 图 1.13) ， 被 称 为 “VB 之 父 ” “交互 设 计 之 父 ”， 荣 
获 视窗 先锋 奖 (Microsoft Windows Pioneer) 和 软件 梦幻 奖 (Software Visionary) ， 他 创建 了 
Cooper 交互 设计 公司 ， 此 公司 一 直 致 力 于 创建 专 为 用 户 而 设计 的 应 用 软件 。 他 的 代表 性 著 
作 有 About Face, The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy 
and How to Restore the Sanity, 

(3) BAR s 乔布斯 (Steve Jobs, 图 1.14) ， 美国 苹果 公司 联合 创办 人 ，Pixar 动画 公司 
创始 人 ， 代 表 作 品 Macintosh, Mac 系列 、iPod、iTunes、iPhone 等 。 从 2007 年 6 月 29 日 ， 
苹果 公司 推出 自 有 设计 的 iPhone 手机 到 现在 的 iPhone 6S, 一 直 受 到 消费 者 的 热 捧 。 我 们 可 
以 认为 ， 乔 布 斯 既是 苹果 公司 的 CEO， 又 是 苹果 产品 的 设计 者 。 





四” 必 应 词典 http; //www.bing.com/knows/search?q=%E9%A1%B9%E7%9B%AE%E7%BB%8F%E7%90%86& 
mkt=zh-cn 
@ ” 必 应 词典 http; /www.bing.com/knows/search?q=%E4%BA%A7%E5%93%81%E7%BB%8F%E7%90%86& 
mkt=zh-cn 
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知识 拓展 三 ， 参考 书目 及 介绍 


图 1.14 PER- 乔布斯 





工业 出 版 社 ，2008。 简 介 : 本 书 采纳 了 界面 设计 领域 的 智慧 和 
经 验 ， 既 包括 基础 知识 ， 又 讲述 了 复杂 的 概念 ， 既 适合 初学 
学 习 ， 又 适合 专家 和 研究 人 员 使 用 ， 是 一 本 关于 现代 视觉 和 交 加 了 h 的 
互 设计 的 教程 。 1 毕业 典礼 上 的 演讲 

[ 美 ] Alan Cooper, Robert M.Reimarins 软 件 观念 革命 交互 设计 精 骨 [M]. 北京 : 电 
子 工业 出 版 社 ，2005。 简 介 : 本 书 是 一 本 设计 数字 化 产品 的 启蒙 书 ， 它 在 帮助 您 设计 更 具有 
吸引 力 、 更 有 效 的 对 话 框 的 同时 六 还 将 帮助 您 了 解 用 户 如 何 理解 、 学 习 您 的 软件 ， 以 及 与 之 
交互 的 方式 。 本 书 论述 了 各 种 具有 革命 意义 的 设计 观念 目标 导向 设计 过 程 ， 着 重 讲述 了 
有 关 交 互 设计 的 原理 和 方法 。 

[ 美 ] Alan Cooper. 交互 设计 之 路 一 一 让 高 科技 产品 回归 人 性 [M]. 北京 : 电子 工业 出 版 
社 ，2006。 简 介 志 本 书 是 基于 众多 商务 案例 了 讲述 如 何 创建 更 好 的 、 高 客户 忠诚 度 的 软件 产 
品 和 基于 软件 的 高 科技 产品 的 书 。 本 书 列举 子 很 多 真实 可 信 的 例子 ， 说 明 目 前 在 软件 产品 和 
基于 软件 的 高 科技 产品 中 ， 普 遍 存 在 “ 难 用 ”的 问题 。 通 过 一 些 生 动 的 实例 讲述 了 由 作者 倡 
导 的 “目标 导向 ”交互 设计 方法 在 解决 “ 难 用 ”问题 方面 的 有 效 性 ， 证 实 了 只 有 改变 现 有 观 
念 ， 才 能 有 效 地 在 开发 过 程 中 引入 交互 设计 ， 将 产品 的 设计 引 向 成 功 。 
[ 美 ] 施耐德 曼 ， 普 莱 萨 特 . 用 户 界面 设计 一 一 有 效 的 人 机 交互 策略 [M]. 北京 : 电子 工 
业 出 版 社 ，2011。 简 介 : 全 面 介绍 了 最 新 和 最 权威 的 有 关 人 机 交互 动态 信息 ， 代 表 了 人 机 交 
互 著作 的 主流 发 展 趋势 。 面 向 的 读者 极为 广泛 ， 具 有 计算 机 科学 、 心 理学 、 图 书馆 管理 学 、 
商业 和 信息 系统 、 教 育 方法 、 媒 体 研究 、 人 性 因素 工程 学 、 人 机 工程 学 或 者 工业 工程 党 背 
景 ， 从 事 人 机 交互 研究 的 人 员 。 
[Æ] Alan Cooper, Robert Reimann, David Cronin. About Face 3 交互 设计 精 散 [M]. 北 
京 : 电子 工业 出 版 社 ，2012。 简 介 : 本 书 是 一 本 数字 产品 和 系统 的 交互 设计 指南 ， 全 面 系 
统 地 讲述 了 交互 设计 过 程 、 原 理 和 方法 ， 涉 及 的 产品 和 系统 有 个 人 计算 机 上 的 个 人 和 商务 软 
fF. Web 应 用 、 手 持 设备 、 信 息 亭 、 数 字 医 疗 系统 、 数 字 工 业 系统 等 。 运 用 《About Face3 
交互 设计 精 作 (经 典 再 现 软 精装 版 )》 的 交互 设计 过 程 和 方法 ， 有 助 于 了 解 使 用 者 和 产品 
间 的 交互 行为 ， 进 而 更 好 地 设计 出 更 具 吸 引力 和 更 具 市 场 竞 争 力 的 产品 。 
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[ 美 ] 唐纳德 * A. 诺 曼 . 设计 心理 学 [M]. 北京: 中 信 出 版 社 ，2010。 简 介 : 诺 曼 博 士 
用 该 谐 的 语言 讲述 了 许多 我 们 日 常生 活 中 人 常常 会 遇 到 的 挫折 和 危险 ， 帮 有 我 们 找到 了 这 些 
问题 的 关键 ， 即 产品 设计 名 略 了 使 用 者 在 一 定 情境 中 的 真实 需求 ， 甚 至 违背 了 认 知 学 原 
理 。 诺 曼 博士 本 书 中 强调 以 使 用 者 为 中 心 的 设计 哲学 ， 提 醒 消费 者 在 挑选 的 物品 ， 必 须 
要 方便 好 用 ， 易 于 理解 ， 希 望 设 计 师 在 注重 设计 美感 的 同时 ， 不 要 忽略 设计 的 一 些 必要 
因素 ， 因 为 对 于 产品 设计 来 说 ， 安 全 好 用 永远 是 竞争 的 关键 。 

[XÆ] Bill Buxton. 用 户 体验 草图 设计 一 一 正确 地 设计 ， 设 计 得 正确 [M]. 北京 : 电子 工 
业 出 版 社 ，2012。 简 介 : 是 一 本 讲解 用 户 体验 设计 的 纯 创 新 层面 的 书 ， 可 以 帮助 读者 更 好 地 
理解 各 自在 交叉 工作 中 的 角色 。 以 上 推荐 的 教材 分 别 如 图 1.15 所 示 。 
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图 1.15 推荐 一 些 交互 设计 相关 书籍 


国外 招收 交互 设计 专业 研究 生 的 学 校 有 卡耐基 一 梅 隆 大 学 (Carnegie Mellon) 、 伊 利 诺 
斯 州立 大 学 的 设计 学 院 (Institute of Design) 和 英国 皇家 设计 学 院 (Royal College of Art) 等 。 


15 创新 思维 培养 


交互 设计 的 过 程 在 于 启发 创新 思维 ， 发 挥 创造 力 。 设 计 本 身 是 一 种 创造 性 活动 ， 不 论 是 
工业 设计 、 平 面 设 计 还 是 交互 设计 ， 创 新 思维 方式 的 培养 在 设计 教学 中 发 挥 着 重要 的 作用 。 
创新 思维 的 发 散 和 收敛 有 助 于 提 发 现 、 归 纳 、 分 析 、 解 决 问题 的 能 力 。 

斯 坦 福 设计 学 院 通 过 实践 培养 学 生 的 创新 能 力 ， 他 们 让 学 生 从 现实 社会 中 着 手 ， 以 同 理 
心 去 了 解 设计 的 服务 对 象 ， 找 到 他 们 的 真正 需求 ， 之 后 开发 出 出 人 意料 的 解决 方案 ， 然 后 创 




















造 出 简单 的 产品 原型 ， 拿 到 市 场 上 与 人 们 互动 测试 。 通 过 实践 产生 经 验 循环 迭代 ， 设 计 出 
有 趣 的 方案 ， 并 在 脑海 中 形成 更 深刻 的 认识 。 创 新 思维 可 以 通过 很 多 种 途径 来 培养 ， 这 里 
单 介绍 几 种 常用 的 方法 。 

1. 多 看 

创意 从 生活 中 来 ， 要 养 成 细心 观察 的 好 习惯 ， 生 活 中 处 处 值得 发 掘 。 

交互 设计 师 需 要 有 较 好 的 视觉 设计 感觉 需要 欣赏 大 量 的 优秀 作品 。 培 养 自 己 的 鉴赏 能 
力 ， 培 养 独立 的 审美 见解 ， 看 出 作品 哪里 好 、 哪 里 不 好 、 为 什么 好 、 为 什么 不 好 ， 多 提问 、 
多 分 析 ， 这 样 审 美能 力 和 设计 水 平 在 欣赏 中 逐渐 得 到 提高 。 

2. 多 画 

当 我 们 有 具备 一 定 的 审美 感 、 对 设计 有 了 一 些 感悟 想 靶 后 ， 就 可 以 做 些 自己 感 兴趣 的 设计 
了 ， 按 照 需求 绘制 出 设计 草图 ， 这 是 一 个 从 理论 应 用 到 实践 的 过 程 。 

贾 森 * 圣 玛 利 亚 曾 说 过 : as 一 个 出 色 的 艺术 家 ， 而 是 为 
了 让 人 成 为 一 个 杰出 的 思想 者 ”; 俗话 说 “好 记性 不 如 烂 所 以 只 是 欣赏 还 不 够 ， 应 
该 把 平时 从 日 常生 活 、 网 站 、 设 计 杂志 上 看 到 的 优秀 设 品 、 图 案 及 时 记录 下 来 ， 以 手绘 
的 形式 收集 在 一 个 专门 自制 的 “素材 集 ” 中 ， 当然 (也 可 以 使 用 信息 化 的 手 让 进行 记 录 ， 如 
拍照 、 电 子 记事 本 等 。 ` y S 

3. 多 想 QÑ 

当 我 们 通过 眼睛 看 到 了 大 量 MAAT 后 ， 怎 样 才能 在 需要 的 时 候 如 同 程序 命令 那样 
立刻 调动 它们 呢 ? 这 就 需要 去 想 、 思考 。 眼 睛 每 天 看 到 的 东西 太 多 ， 能 够 留存 在 大 脑 记忆 
中 的 并 不 是 看 到 的 全 部 。 RDAS Ai & 时 记忆 ， 经 常 回忆 能 让 我 们 
对 某 一 事物 保持 良好 的 PAi, 多 动脑 才能 使 有 脑子 用 越 活 。 

4. 多 做 Á `x 

FATA DESKERIEN, miesanie, 通过 前 期 的 多 看 、 多 画 、 多 想 ， 最 终 还 
ey 中 把 脑海 中 的 构想 表达 出 来 。 这 时 需要 较 好 的 手绘 能 力 ， 同 时 结合 一 些 软 
件 进行 辅助 设计 。 

5. 多 学 

交互 设计 涉及 的 学 科 领 域 众 多 ， 课 堂 内 的 知识 量 往往 是 有 限 的 ， 今 天 的 学 生 除了 掌握 专 
业 基 本 知识 和 技能 外 ， 还 应 该 具备 创造 新 知识 、 运 用 新 知识 的 能 力 ， 鼓 励 多 学 科 的 学 习 ， 吸 
收 不 同学 科 的 营养 。 艺 术 类 专业 的 学 生 普遍 形象 思维 较 活 跃 ， 读 图 能 力 强 ， 但 逻辑 思维 较 欠 
缺 ， 这 需要 多 进行 逻辑 思维 的 相关 训练 ， 达 到 综合 能 力 的 平衡 发 展 。 

6. 多 合作 

前 面谈 到 多 学 科 的 学 习 ， 就 不 可 避免 地 在 设计 过 程 中 进行 多 学 科 的 交叉 合作 ， 即 使 是 在 
同一 领域 内 ， 也 提倡 多 合作 交流 。 俗 话说 “三 个 臭 皮 匠 ， 赛 过 诸葛 亮 ”， 一 个 人 的 智慧 往往 
是 有 限 的 。 在 互联 网 大 数据 时 代 ， 更 倡导 人 们 的 资源 共享 和 团队 合作 精神 。 头 脑 风 暴 等 设计 
方法 体现 的 都 是 团队 合作 。 

谈 到 灵感 ， 德 国 设计 师 Smashing Magazine 在 其 专著 《 众 妙 之 门 一 用 户 体验 设计 的 秘 
密 》 一 书 的 “灵感 应 该 从 何 而 来 ”章节 中 提 到 ， 他 的 灵感 来 自 人 本 身 ， 他 会 观察 用 户 的 交互 
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方式 ， 观 察 用 户 解决 问题 的 方式 。 尽 可 能 多 了 解 用 户 及 其 故事 ， 如 通过 《国家 地 理 》 杂 志 了 
解 世界 各 地 的 人 处 理 问 题 的 方式 ， 给 予 他 本 人 无 尽 的 灵感 。Smashing Magazine 提倡 在 遇 到 设 
计 问 题 的 时 候 ， 不 是 先 浏览 各 种 图 库 获得 灵感 ， 而 会 如 何 去 观 察 、 去 领略 设计 外 观 背 
后 的 东西 ， 目 的 是 超越 表象 看 到 人 的 真正 他 还 强调 :“ 要 学 会 观察 用 户 和 了 解 用 户 的 方 
式 ， 并 试图 去 取悦 用 户 。 只 有 养 成 绩 密 筹划 、 深 入 思考 的 好 习惯 ， 才 能 在 设计 时 得 心 应 手 ”。 










课 后 练习 


1. 寻找 身边 10 个 不 好 的 交互 设计 案例 ， 进 行 分 析 ， 并 提出 改进 方案 。 
2. 从 虚拟 现实 、 数 码 产 品 、 城 市 中 寻找 1 或 2 个 较 好 的 交互 设计 例子 ， 并 简 述 其 优点 。 


如 何 培养 创造 力 和 ”汤姆 武 更 克 : 大 脑 创 。 Julie Burstein: 4 个 
自信 心 造 含义 的 3 种 方法 关于 创造 力 的 课程 
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教 字 要 求 和 目标 sm k 
要 求 : 中 心 的 设计 理念 ， 了 解 用 户 研究 的 方 


法 ， a 行 需求 分 析 。 
Eo — 并 进行 原型 设计 。 
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概念 
如 何 理解 以 用 户 为 中 心 的 设计 1 用 户 研究 ] EU 
用 户 研究 的 方法 


定义 目标 用 户 
用 户 数据 整理 


e 创建 问题 
Pass] = 
ppg | 理解 用 户 需求 并 进行 需求 分 析 Aus pgi e EH 


中 心 的 设计 编写 故事 版 
需求 确定 


什么 是 原型 设计 
nemeit pm | ga 
产品 原型 设计 软件 


案例 




















在 设计 的 前 、 中 、 后 期 始终 需要 围绕 “以 用 户 为 中 心 ” 这 条 主线 ， 也 就 是 站 在 用 户 的 角 
度 看 问题 、 分 析 问 题 、 体 验 感受 。 当 设计 师 能 够 将 自己 的 角色 从 产品 的 设计 者 向 产品 的 使 用 
者 角色 转变 时 ， 才 是 做 好 设计 的 前 提 ， 才 能 更 深入 地 感受 到 用 户 在 使 用 产品 过 程 中 的 所 思 所 
想 ， 这 也 是 做 到 用 户 体验 的 先决 条 件 。 











2.1 如 何 理解 以 用 户 为 中 心 的 设计 


pA 


2.1.1 以 用 户 为 中 心 的 设计 概述 FZKA 
以 用 户 为 中 心 的 设计 (User Centered Design, UCD) ， 即 站 在 用 户 的 角度 做 设计 ， 让 产 









































品 更 适合 用 户 使 用 。 关 注 用 户 需 求 及 目标 。 是 交互 设计 的 揭 计 方法 之 一 ， 也 是 目前 做 交互 设 
计 最 常用 的 一 种 方法 。 ` 

以 用 Pahoin 想来 源 于 工业 设计 和 人 类 工效 学 ， 
m [s] Ao] 提倡 让 产品 适应 人 需求 ， 而 不 是 人 来 适合 产品 。 在 设计 过 程 
中 ， 设 计 归 常常 邀请 用 户 参与 每 个 阶段 的 设计 : 在 设计 初始 ， 
El Ei 征求 用 户 的 建议 ， 了 解 用 户 需求 ， 在 设计 中 期 ， 请 用 户 参 与 情 
Pama 。 为 人 们 设计 ， 而 境 化 角 的 任务 ， 为 设 计 师 提供 谈 计 的 概念 原型 ， 在 设计 后 期 ， 
aS ` “请 用 户 帮助 设 计 师 进行 产品 的 痊 验 与 评测 。 在 整个 设计 周期 ， 

用 户 全 程 参 与 其 中 ， 实现 设计 决策 ， 以 此 帮助 产 - 品 更 具有 人 性 化 征 。 





-个 比较 完整 的 UCD 团队 包含 : 可 用 性 F BDM. 数据 分 析 师 、 信 息 架 构 、 交 互 设计 、 
视觉 设计 、 内 容 优化 一 界面 制作 、 人 六 人 分 


T; m ARI 
E E TS 目前 很 多 公司 都 把 用 户 的 使 用 建议 加 入 产品 中 ， 也 有 
ns S 司 专门 成 立 用 户 体验 部 门 。 用 户 体验 设计 如 空气 与 水 一 样 时 刻 围 绕 在 我 们 身边 。 

用 户 体验 (User Experience) 基于 以 用 户 为 中 心 的 观点 (UCD) ， 强 调 产品 或 软件 的 应 用 
和 审美 价值 ， 包 括 印象 (感官 冲击 ) 、 功 能 、 易 用 性 、 内 容 等 因素 。 这 些 因素 相互 关联 、 不 
可 分 割 ， 共 同形 成 用 户 体验 。” 在 交互 设计 中 ,设计 师 通常 会 在 了 解 目标 群体 特征 和 设计 思 
路 后 ， 再 进行 典型 用 户 角 色 和 情境 的 设计 ， 通 过 模拟 演示 用 户 使 用 情境 ， 推 殴 用 户 在 使 用 产 
品 过 程 中 的 交互 细节 ， 最 后 用 流程 图 、 线 框图 、 低 保 真 的 形式 表现 出 来 。 图 2.1 是 一 个 国外 
团队 的 用 户 体 验 流程 ， 从 用 户 的 角度 出 发 ， 描 述 用 户 的 交互 过 程 和 需求 。 

在 生活 中 ， 有 很 多 关于 用 户 体 验 的 例子 。 例 如 ， 我 们 发 现 所 有 赌场 进门 之 后 都 必须 先 把 
现金 换算 成 筹码 ， 赢 了 钱 之 后 再 把 筹码 换 成 现金 ， 为 什么 要 这 样 做 呢 ? 原来 这 是 为 了 降低 赌 
客 的 损失 厌恶 感 ， 当 赌 客 在 赢 钱 的 时 候 心里 是 把 它 换算 成 钱 的 ， 觉 得 赢 的 是 钱 。 输 的 时 候 ， 看 
着 筹码 只 会 想 不 就 是 个 塑料 片 嘛 ， 没 那么 心疼 吧 。 还 有 房产 中 介 门 店 里 ， 大 家 可 以 发 现 让 客户 










































































D HK. REHA UCD 观念 与 实务 [MJ]. 北京 : 中 国 建筑 出 版 社 ，2009: 16. 
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谈判 的 桌 FERAE Tep 为 防止 买卖 双方 在 党 子 底下 互相 传 纸 条 忆 开 中 介 公司 。 

小 KIRA Oh 大 黎 万 强 谈 道 :“ 用 户 休 验 就 “好 用 好 看 " ， 翻 译 成 设计 语言 是 UVUE 
的 话题 ,但 "为 谁 设计 ” ses ， 条 件 ” 。 确 定 为 谁 设计 、 好 用 、 好 看 ， 这 是 小 米 
用 户 体验 的 至 全“ 渐进 式 命题 ” 。 在 好 用 、 好 看 之 间 ， 好 用 永远 都 是 第 一 位 的 ， 原 则 是 “ 保 
证 好 用 、 努 力 好 看 ” 。 比 如 在 “短信 最 近 联 系 人 ”功能 设计 上 ， 原 本 有 另 一 个 设计 方案 是 要 
将 其 关 掉 的 ， 但 这 个 功能 好 用 的 价值 显然 大 过 了 好 看 的 价值 ， 于 是 又 重新 加 了 回来 。 小 米 设 
计 好 看 的 部 分 分 为 两 个 阶段 ， 第 一 阶段 是 个 性 漂亮 ， 第 二 阶段 是 形成 风格 化 。MIUI 不 断 发 
展 ， 经 过 五 个 版 本 的 设计 之 后 ， 风 格 化 形成 ， 体 验 感 也 更 完善 。 小 米 团队 在 做 MIUI 时 ， 为 
了 让 用 户 深入 参与 到 产品 研发 过 程 中 ， 设 计 了 “橙色 星期 五 ”的 互联 网 开发 模式 ， 核 心 的 
MIUI 团队 在 论坛 与 用 户 互动 ， 每 周二 让 用 户 提交 使 用 过 后 的 四 格 体验 报告 ， 系 统 每 周 更 新 。 
图 2.2 是 “橙色 星期 五 ”的 互联 网 开发 模式 。 


图 2.2 “ 栓 色 星期 五 ”的 互联 网 开发 模式 





























D http: /www.agile247.pl 
© ” 黎 万 强 .参与 感 [M]. 北京 : 中 信 出 版 社 ，2014. 
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2. 心理 模型 、 实 现 模型 和 表现 模型 

前 文 已 提 到 提高 用 户 体验 的 三 种 模型 : 心理 模型 、 实 现 模型 和 表现 模型 ， 下 面具 体 介绍 
这 三 种 模型 是 如 何 提高 用 户 体验 的 。 

人 们 在 日 常生 活 中 会 根据 自己 的 经 验 和 习惯 形成 很 多 对 事物 的 起 因 、 机 制 和 相互 关系 等 
似乎 是 理所当然 的 看 法 ， 这 就 是 心理 模型 (Mental Model) 。 设 计 师 掌握 好 心理 模型 ， 可 以 更 
好 地 了 解 用 户 的 心理 ， 从 而 设计 出 用 户 体验 度 高 ， 令 用 户 满意 的 产品 。 

任何 机 器 都 有 达到 其 目标 的 机 制 ， 例 如 ， 电 影 放映 机 运用 杂乱 运动 部 件 的 复杂 序列 来 创 
造 一 种 视觉 错觉 。 它 发 出 一 东 很 亮 的 光线 透 过 半 透 明 的 微缩 图 像 ， 持 续 大 约 若干 分 之 一 秒 的 
时 间 。 然 后 在 下 一 幅 微 缩 图 像 就 位 前 挡住 光线 ， 下 一 幅 图 像 就 位 后 再 次 投射 光线 。 电 影 放映 
机 每 秒 24 次 重复 这 个 过 程 ， 每 次 一 幅 图 像 。 基 于 软件 产品 ， 取 代 这 种 运动 部 件 的 机 制 是 算 
法 和 相互 通信 的 代码 模块 。 这 种 有 we. a. Donald Norman 和 
其 他 人 称 为 “实现 模型 ”(Implementation Model) , 

软件 (以 及 其 他 任何 依赖 于 软件 的 数字 产品 ) 个 和 T SA, 它 告诉 世界 ， 软 件 是 由 
程序 员 或 者 设计 者 创造 的 。 虽 然 这 种 表达 不 一 em 件 在 计算 机 内 部 是 如 何 工作 
的 ， 但 很 不 幸 ， 实 际 情况 却 经 常 如 此 。 与 其 他 媒介 件 的 这 种 独立 于 计算 机 的 真实 行 
为 来 表现 其 功能 的 能 力 ， 在 软件 世界 里 更 加 明 品 LM 许 聪 明 的 设计 者 隐藏 关于 软件 如 何 
完成 工作 的 细节 。“ 开 发 出 了 什么 ”和 “提供 A” 的 分 离 则 产生 出 了 数字 世界 里 的 第 三 
种 模型 ， 即 设计 者 的 表现 模型 (Represented) odel) ， 如 图 2.3 所 示 。 









































心理 模型 
(Mental Model ) 


实现 模型 
(Implementation Model) 


FIOT. 


计算 机 工作 过 程 我 们 看 到 的 形态 
图 2.3 实现 模型 、 表 现 模型 与 心 埋 模 型 的 图 示 








从 图 2.3 中 我 们 可 以 看 出 ， 表 现 模 型 离心 理 模 型 越 近 ， 呈 现 的 形态 就 越 容易 让 人 接受 和 
理解 ， 反 之 离 实现 模型 越 近 ， 越 接近 计算 机 工作 原理 ， 人 越 不 容易 理解 。 在 系统 设计 中 ， 交 
互 设计 师 很 重要 的 目标 是 使 表现 模型 和 用 户 的 心理 模型 尽 可 能 相互 匹配 ， 软 件 工作 机 制 越 明 
晰 地 展现 在 用 户 面前 ， 越 容易 让 用 户 理解 使 用 ， 越 接近 用 户 心理 模型 。 
心理 模型 对 用 户 来 说 非常 重要 ， 因 为 这 将 直接 影响 产品 功能 的 实现 ， 下 面 的 案例 能 更 好 
地 帮助 您 理解 心理 模型 、 实 现 模型 、 表 现 模型 之 间 的 关系 。 
比如 ， 我 们 在 亚 马 进 上 购物 、 美 团 上 下 单 、 有 道 词 典 中 查阅 单词 (图 2.4) ， 我 们 通过 这 些 
应 用 程序 的 网 页 和 APP 界面 显示 的 内 容 ， 寻 找 我 们 需要 的 信息 ， 确 认 信 息 、 获 取信 息 的 过 程 
都 是 通过 一 个 个 图 标 按钮 实现 的 。 那 么 我 们 可 以 认为 ， 用 户 心 理 模型 是 指 : 我 们 通过 亚马逊 的 















































= 
$; 



































第 
章 
-o Bagga `“ 以 
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wumnau, 人 1 > 
网 页 、 美 团 APP 寻找 需要 的 商品 、 查 看 商品 信息 、 点 击 购买 支付、 完成 交易 ， 若 干 天 后 收 
到 货物 ， 通 过 有 道 词 典 的 APP 输入 框 输入 单词 、 查 询 、 获 取 查 询 信息 。 其 中 有 些 程序 步 又 与 
我 们 现实 世界 中 的 购物 方法 是 具有 相似 性 的 ， 但 整个 过 程 是 由 计算 机 里 一 连 串 的 代码 运算 、 电 
入 号 的 来 回 传 答 实现 的 ， 这 就 是 实现 模型 与 心理 模型 的 不 同 。 表 现 模型 就 是 能 “ 国 起 95 回 ] 
接 实现 模型 与 心理 模型 的 桥梁 ， 设 计 师 需要 想 办 法 将 抽象 的 实现 模型 一 步 步 装 
换 成 与 用 户 所 需 产品 对 应 的 心理 模型 。 但 随 着 产品 越 来 越 丰富 、 复 杂 ， 并 不 是 
所 有 的 产品 都 能 够 找到 相对 应 的 心理 模型 。 设 计 师 需要 选择 一 个 与 该 产品 接近 [m] a es 
的 概念 去 尝试 理解 、 使 用 ， 从 而 建立 新 的 心理 模型 。 — s 
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2.1.2 ”用户 研究 
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m 设计 师 需要 了 解 
计 计 师 定义 用 户 特 征 。 
月 户 的 需求 通过 目 





明 户 研究 是 基于 心理 学 的 、 以 了 解 用 户 为 目标 的 活动 ， 贯 穿 于 整个 产品 的 生命 周期 中 。 








户 行为 、 品 牌 忠诚 度 、 阅 读 习 惯 、 学 习 方式 等 相关 内 容 ， 这 有 助 于 设 


标 、 行 为 、 说 法 这 三 种 形式 来 传达 。 举 一 个 例子 ， 天 气 冷 了 ， 某 人 想 


买 件 棉 只 ， 作 为 营业 员 的 你 在 众多 的 棉 只 商品 中 为 他 推荐 ， 他 感到 非常 满意 ， 于 是 拿 着 商品 
结账 开心 回 家 了 ， 这 是 第 一 种 情况 。 另 一 种 情况 是 ， 他 有 对 棉 只 有 一 些 特别 的 要 求 : 如 红色 


短 款 连 帽 子 的 棉 只 ， 此 时 手头 上 又 没有 完全 能 够 满足 他 要 求 的 商品 ， 那 么 你 该 怎么 做 呢 ? 


在 这 个 案例 中 ， 用 户 最 根本 的 需求 就 是 买 件 棉 只 御寒 ， 目 标 是 进行 相关 商品 的 选择 ， 行 
为 显示 了 这 个 目标 ， 他 有 一 个 比较 明确 的 需求 : 红色 短 款 连 帽子 的 棉 只 。 此 时 ， 我 们 需要 做 





的 就 是 根据 这 些 信 
的 实际 需求 。 但 在 第 二 














Norman 在 《技术 居 首 ， 
通 工 具 ， 他 们 一 定 说 ， 











1. 可 用 性 





性 、 效 率 和 用 户主 观 满意 度 。 可 用 性 已 经 成 为 衡量 产 


况 是 因为 用 户 的 真正 需求 是 通过 不 断 的 沟通 交流 中 Wa 


实 的 。 所 以 ， 还 É 

中 这 样 的 例子 很 多 ， 甚 至 还 有 比 这 些 关 系 更 

还 必须 n EA 了 解 用 户 的 
N 


` 
可 用 性 (Usability) 是 指 产 品 在 特定 使 用 情境 PaM 














为 这 位 顾客 提供 适合 他 的 商品 。 在 第 一 种 情况 s 乓 人 户 


-种 情况 中 ， 我 们 并 不 能 马 u. S. ， 出 现 这 种 情 
wa 正如 Donald 
“如 果 我 癌 人 们 想 要 什么 样 的 交 





需求 为 未 》 中 引用 -和 
一 下 更 快 的 马 ! °” A F 2238, 人 们 林 必 真正 明 自 自己 的 需求 是 什么 ， 
要 再 深 控 、 sinnn, 以 便 做 更 好 的 推荐 。 生 活 








杂 的 情况 ， 我 们 除了 要 知道 用 户 的 行为 外 ， 





需求 。 


\\ 






A E 
量 的 重要 组 成 部 分 。 这 里 的 使 用 情境 


是 指 产品 Lu 任务 、 设 备 “s: H 及 物理 和 社会 环境 (图 2.5) , 


2. 有 效 性 





X, 


使 用 情境 


可 用 性 衡量 标准 





2.5 可 用 性 框架 图 


有 效 性 是 指 用 户 达 成 特定 目标 的 准确 性 和 完整 性 ， 其 衡量 指标 是 目标 是 否 达成 、 质 量 是 
否 达成 :效率 是 指 用 户 达 成 特定 目标 的 准确 度 和 完成 度 所 消耗 的 资源 ， 其 衡量 指标 是 消耗 的 


时 间 ， 以 及 所 经 历 的 交互 步骤 ;满意 度 是 指使 用 产品 的 自由 度 及 积极 态度 ， 其 衡量 指标 是 满 
意 度 打 分 。 

3. 可 用 性 工程 

可 用 性 工程 (Usability Engineering) 是 交互 式 IT 产品 / 系统 的 一 种 先进 的 开发 方法 ， 包 
括 一 整套 工程 过 程 、 方 法 、 工 具 和 国际 标准 ， 它 应 用 于 产品 生命 周期 的 各 个 阶段 ， 核 心 是 以 
用 户 为 中 心 的 设计 方法 论 (User-Centered Design，UCD) ， 强 调 以 用 户 为 中 心 来 进行 开发 ， 
能 有 效 评估 和 提高 产品 可 用 性 质量 ， 弥 补 常规 开发 方法 无 法 保证 可 用 性 质量 的 不 足 。 

在 以 用 户 为 中 心 的 设计 中 ，ISO 9241-210 提倡 的 设计 流程 ， 如 图 2.6 所 示 。 

实用 设计 流程 和 一 些 常用 的 方法 ， 如 图 2.7 所 示 。 








2.7 ”实用 设计 流程 和 一 些 常用 的 方法 
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2.1.3 用户 研究 方法 

用 户 研 究 的 方法 很 多 ， 下 面 介 绍 几 种 常用 的 方法 。 

1. 定量 研究 与 定性 研究 

定量 研究 是 一 种 对 事物 可 以 量化 的 部 分 进行 测量 和 分 析 ， 以 检验 研究 者 自己 关于 该 事物 
的 某 些 理 论 假设 的 研究 方法 。 

定性 研究 是 以 研究 者 本 人 作为 研究 工具 ， 在 自然 情境 下 采用 多 种 资料 收集 方法 对 社会 现 
象 进行 整体 性 研究 ， 使 用 归纳 法 分 析 资 料 并 形成 理论 ， 通 过 与 研究 对 象 互动 ， 对 其 行为 和 意 
义 建构 获得 解释 性 理解 的 一 种 活动 。 

经 过 市 场 调查 之 后 的 定量 研究 ， 深 究 收集 来 的 成 堆 数据 无 法 获得 对 问题 的 真知 灼 见 ， 只 
有 定性 的 研究 方法 才能 发 据 深 层 的 信息 。 y 

以 上 两 研究 方法 具有 各 自 的 特点 (A28), ENADES ARARE, A 
定性 研究 更 容易 出 效果 。 NY 











”图 2.8 定量 研究 三 定性 让 


2.5W2H X s 


| s. S 

5W2H 析 法 是 指 What (是 什么 ) HA 本) 、When (什么 时 间 完成 ) 、 
Who (由 谁 ) Where (在 哪里 做 ) < How to do (怎么 做 ) How much (做 到 什么 程 
度 ) ， 用 这 些 发 问 来 发 现 解决 问题 的 线索 ， 寻 找 解决 问题 的 思路 ， 再 进行 设计 构思 。 

在 设计 前 ， 面 对 某 些 问 题 需求 不 明确 的 情况 下 ， 这 种 方法 能 够 帮助 设计 师 找 出 产品 需 
RK: 在 设计 后 ， 帮 助 设计 师 对 原 产 品 的 合理 性 进行 检查 。 通 常 在 设计 过 程 中 ， 这 七 个 问题 能 
够 得 到 令 人 满意 的 答复 则 表示 设计 方案 较 可 行 ， 反 之 表示 还 有 要 改进 的 方面 。 这 种 方法 的 优 
势 在 于 : 准确 定义 产品 ， 清 晰 表述 问题 ， 较 好 地 掌握 了 事物 本 质 ， 容 易 理解 、 使 用 ， 有 助 于 
对 设计 的 全 面 思考 。 

3. 观察 法 

观察 法 是 一 种 最 古老 的 方法 ， 也 是 人 类 与 生 俱 来 的 一 种 能 力 。 婴 儿 最 初 的 学 习 离 不 开 
对 周围 事物 的 观察 ， 有 些 日 常生 活 技能 除了 通过 学 习 外 ， 大 部 分 都 是 通过 观察 大 人 的 行为 
动作 进而 模仿 和 探索 获得 的 。 他 们 观察 父母 的 言行 举止 、 动 作 行为 ， 学 习 到 了 新 的 日 常生 
活 技能 。 我 们 经 常 能 够 看 到 ， 小 孩子 身上 折射 出 父母 的 身影 ， 除 了 部 分 先天 的 遗传 外 ， 还 
有 一 部 分 是 通过 后 天 学 习 获 取 的 ， 这 便 是 通过 观察 得 到 的 。 在 科学 研究 领域 ,科研 人 员 也 


























经 常 使 用 观察 法 ， 比 较 有 名 的 例子 是 牛顿 万 有 引力 定律 的 发 现 ， 还 有 通过 观察 动物 的 特征 
行为 ,仿生 晴 蝶 的 身体 结构 发 明了 直升机 ;根据 迪 螂 禹 和 锯齿 草 发 明了 锯 子 ， 利 用 水 母 、 
墨鱼 反 冲 原理 设计 了 火箭 等 。 

观察 法 是 指 研究 者 根据 一 定 的 研究 目的 、 研 究 提纲 或 观察 表 ， 用 自己 的 感官 和 辅助 工具 
去 直接 观察 被 研究 对 象 ， 从 而 获得 资料 的 一 种 方法 。 科 学 的 观察 具有 目的 性 和 计划 性 、 系 统 
性 和 可 重复 性 。 观 察 一 般 是 利用 眼睛 、 耳 条 等 感觉 器 官 去 感知 观察 对 象 。 由 于 人 的 感觉 器 官 
具有 一 定 的 局 限 性 ， 观 察 者 往往 要 借助 各 种 现代 化 的 仪器 和 手段 ， 如 照相 机 、 录 音 机 、 显 微 
录像 机 等 来 进行 辅助 观察 。" 

观察 法 是 我 们 日 常 最 常用 的 一 种 方法 ， 也 是 最 易于 使 用 的 方法 。 观 察 法 的 步骤 为 : 明确 
研究 方向 一 选取 观察 对 象 一 制订 观察 计划 和 设计 观察 内 容 一 进行 观察 一 资料 整理 与 分 析 。 每 
一 个 步 又 都 关系 到 最 后 结果 ， 明 确 研究 方向 是 对 研究 问题 、 研 究 对 象 的 梳理 ， 是 整个 观察 的 
基础 。 制 订 观 察 计 划 是 策略 ， 观 察 内 容 是 重点 ， ne 我 们 需要 设计 好 观察 的 
内 容 ， 预 计 观察 中 可 能 的 突 发 状况 ， 观 察 内 容 的 设计 需要 全 考虑 、 抓 住 重 点 。 实 际 观察 进 

















行 时 ， 可 多 人 对 其 进行 不 同 角 度 的 观察 不同 角 度 的 记录 , DS s. 全 面 性 和 精 
确 性 。 观 察 后 还 应 及 时 整理 现场 观察 的 资料 ， MAER 遗漏 ， 并 对 资料 进行 分 析 ， 这 样 才 


能 够 保证 观察 的 有 效 性 。 RA 

4. 访谈 法 P a , 

访谈 法 也 是 常用 的 -种 调研 方法 人 合用 提问 交流 的 方式 ， 了 解 用 户 体验 的 过 程 。 访 谈 法 
可 以 是 单 人 访谈 ， 也 可 以 是 多 人 访 涛 访谈 的 内 容 包括 用 户 使 用 过 程 、 使 用 感受 、 个 人 经 历 
等 。 访 谈 法 优 于 观察 法 的 地 为 在 x Ta 了 解 用 户 使 用 产品 的 心理 
感受 和 想法 。 

访谈 法 的 步骤 为 Wi 一 招募 被 人 访谈 前 期 准 
í, jk? 部 分 包含 的 内 容 有 安排 访谈 日 程 和 i EA. AmE munnan: 比如 有 些 访谈 是 
需要 设计 师 和 工程 师 也 参加 的 ， pimpe, = 访谈 地 点 的 确定 ， 一 个 好 的 访谈 环境 能 够 为 
访谈 的 开展 营造 舒适 的 氛围 ， 会 场 不 宜 太 大 ! DUREA, 应 该 根据 访谈 人 数 确定 ， 在 会 场 
中 适当 准备 些 水 、 零 食 能 够 让 气氛 更 加 轻松 愉悦 。 招 募 被 访 者 ， 需 要 明确 目标 被 访 者 并 说 服 
他 们 参 与 访问 研究 ， 被 访 者 的 基本 信息 需要 明确 ， 包 括 性 别 、 年 龄 、 职 业 、 联 系 方式 等 ， 而 
且 进 一 步 明 确 他 们 与 项 目的 相关 信息 ， 如 果 是 网 站 类 的 访问 ， 需 要 了 解 被 访 者 一 个 时 期 内 登 
录 网 站 的 次 数 和 频次 ， 在 项 目 比 较 大 或 者 周期 比较 长 的 情况 下 ， 可 以 建立 被 访 者 数据 库 。 制 
定 访谈 问题 ,访谈 问题 的 制定 应 把 握 由 浅 入 深 、 主 次 分 明 的 原则 ， 由 一 般 问题 和 深入 问题 组 
成 。 一 般 问题 可 由 用 户 来 谈 对 产品 的 体验 感受 ,深入 问题 可 以 就 某 一 个 点 深入 探讨 。 访 谈 记 
录 ， 可 以 采取 文字 记录 、 录 音 记录 、 录 像 记 录 的 形式 ， 最 后 将 这 些 资 料 进行 整理 ,获取 有 价 
值 的 数据 信息 。 
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22 理解 用 户 需求 并 进行 需求 分 析 


从 产品 的 最 初 原型 到 设计 的 过 程 中 ,需求 定义 一 般 由 六 个 阶段 组 成 ， 如 图 2.9 所 示 。 
这 五 个 阶段 是 一 个 选 代 过 程 ， 特 别 是 设 定 人 物 角 色 、 编 写 故事 版 、 需 求 确定 这 三 个 阶 
段 ， 需 要 在 设计 过 程 中 不 断 重 复 ， 才 能 明确 需求 。 这 五 个 阶段 的 具体 实施 步骤 如 下 。 


图 2.9 需求 定义 的 六 个 阶段 





2.2.1 定义 目标 用 户 
每 个 设计 都 会 面向 不 同 的 用 户 群 体 ， 定 义 目标 用 户 能 够 较为 准确 地 挖掘 用 户 需求 。 一 般 
可 以 设 定 一 些 参数 来 对 用 户 进行 定义 ， 如 一 个 论坛 网 站 的 用 户 , 从 用 户 访问 网 站 次 数 和 停留 
在 网 站 的 时 间 进 行 划分 ， 可 分 为 首次 访问 网 站 的 新 用 户 、 访 问 了 网 站 几 次 或 者 几 十 次 的 注册 
用 户 、 经 常 光顾 的 忠实 用 户 和 成 为 付费 会 员 的 VIP 用 户 ,< 如 图 ?2.10 和 表 2-1 所 示 。 
<S 
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w K< 访问 网 站 次 数 
NV d 图 2.10 不 同 层级 用 户 访问 网 站 次 数 和 时 间 的 关系 
表 2-1 不 同 层级 用 户 的 信息 需求 对 比 

o laea | 注册 | 对 网 站 结 | 能 够 快速 找 | 有 经 常 关 | 互动 (留言 | 收费 | a == 
类 型 | 排斥 | 会 员 | pag | 到 需求 信息 | 注 的 栏目 | 评论 等 ) | an | 信任 | 搜索 
新 用 户 ° © ° 
基础 用 户 e c © G o |o 
EEH ° o ° ° ° ° 
VIP 用 户 e © © ° e ° ° 
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在 这 一 阶段 ， 应 进一步 挖掘 用 户 的 特征 ， 控 掘 的 内 容 包括 : 性 别 、 年 龄 、 受 教育 程度 、 所 
处 环境 、 之 前 的 相关 经 历 等 。 不 同 产品 的 设计 ， 对 用 户 特征 的 需求 不 同 ， 这 与 设计 内 容 相关 。 
例如 ， 对 某 一 儿童 点 读 机 的 设计 ， 需 要 对 儿童 所 处 的 环境 、 接 受 能 力 、 动 手 能 力 等 进行 了 解 。 





针对 不 同 的 产品 ， 对 目标 用 户 角色 的 叫 法 也 不 同 。 依 据 对 用 户 角色 的 优先 级 排序 ， 可 将 
用 户 分 为 主要 用 户 、 次 要 用 户 、 补 充 用 户 等 。 


2.2.2 用户 数据 整理 


在 通过 一 些 方法 获取 了 用 户 数据 之 后 ， 设 计 师 需要 从 庞大 的 数据 信息 中 整理 、 归 纳 出 用 








户 的 明确 需求 信息 。 卡 片 法 是 最 常用 














的 整理 、 归 纳 方 法 。 它 是 利用 专门 的 卡片 作为 分 组 记 数 


的 标记 ， 通 过 对 用 户 研究 方法 得 来 的 用 户 信息 、 数 据 进行 归纳 和 汇总 的 方法 。 卡 片 法 的 实施 
分 为 4 个 步 嗓 : 描述 内 容 、 卡 片 分 类 、 为 卡片 群 组 命名 、 概 念 提出 。 








1. 描述 内 容 


在 已 有 主题 下 ， 尽 可 能 完整 、 全 面 地 围绕 这 个 主题 进行 “头脑 风暴 ” 式 的 发 散 性 思考 ， 把 
每 个 想法 分 别 写 在 卡片 上 ， 然 后 把 卡片 贴 在 墙 上 。 卡 片 一 般 用 使 利 贴 即 可 ， 如 图 2.11 所 示 。 








书写 卡片 需要 注意 的 方面 如 下 。 
(1) 每 张 卡片 只 能 写 一 个 需求 。 
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(2) 将 用 户 需求 用 精简 概括 的 词语 表达 清楚 。 


(3) 尽 可 能 将 内 容 写 全 面 。 
(4) “ui. TH, 


在 对 用 户 需求 整理 方面 ， 常 用 到 的 方法 是 头脑 风暴 。 头 脑 风暴 又 称 智 力 激励 法 ， 是 现代 





创造 学 英 基 人 美国 奥 斯 本 提出 的 ， 是 


头脑 风暴 的 具体 实施 如 下 。 


一 种 创造 能 力 的 集体 训练 法 。 


(1) 将 收集 到 的 用 户 信息 、 数 据 资料 展现 给 团队 成 员 ， 确 保 每 位 成 员 都 能 理解 焦点 问题 ， 
然后 发 动 头 脑 风暴 。 此 时 确保 团队 成 员 大 脑 处 于 最 活跃 的 状况 ， 如 果 气 氛 没有 被 调动 起 来 
可 以 借助 一 些 外 在 手段 ， 例 如 ， 音 乐 、 体 育 运 动 、 对 项 目的 详细 介绍 等 ， 目 的 是 让 大 家 开始 
前 都 能 够 进入 最 佳 的 状态 ， 促 使 新 想法 的 产生 。 

(2) 在 头脑 风暴 过 程 中 确保 让 每 位 成 员 有 独立 的 思考 时 间 ， 并 写 下 自己 所 有 的 想法 。 

(3) 每 位 成 员 选 出 自 认 为 不 错 的 3-5 个 想法 ， 再 进行 小 组 头脑 风暴 ， 人 小 组 中 每 个 人 轮流 发 言 。 
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(4) 针对 焦点 问题 ， 收 集 各 种 各 样 可 能 的 想法 。 

此 外 ， 还 可 以 配合 使 用 思维 导 图 。 思 维 导 图 又 称 脑 图 、 心 智 地 图 、 脑 力 激荡 图 、 思 维 导 
图 、 灵 感触 发 图 、 概 念 地 图 、 树 状 图 、 树 枝 图 或 思维 地 图 ， 是 一 种 图 像 式 的 思维 工具 。 思 维 
导 图 使 用 一 个 中 央 关 键 词 或 想法 引起 形象 化 的 构造 和 分 类 的 想法 ， 它 用 一 个 中 央 关 和 键 词 或 想 
法 以 辐射 线形 连接 所 有 的 代表 字 词 、 想 法 、 任 务 或 其 他 关联 项 目的 图 解 方 式 。 图 2.12 是 学 
生 在 课堂 上 针对 大 学 生 业 余 时 间 安 排 做 的 头脑 风暴 图 。 
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在 卡片 内 容 编辑 完成 之 后 ， 设 计 师 开始 对 这 些 卡 片 进行 分 类 。 分 类 的 目的 是 使 用 户 需 求 
BALKANA tumis sih SÍ ks, DERE, SERER ALEN 
群 组 ， 对 群 组 进行 编号 命名 ， 以 示 区 分 ， 也 很 容易 集中 注意 力 。 看 到 新 的 编组 ， 设 计 师 可 能 
又 产生 新 的 想法 。 卡 片 编组 具有 层级 次 序 ， 可 能 会 形成 新 的 网 站 结构 或 导航 目录 。 
3. 为 卡片 群 组 命名 
卡片 群 组 的 名 称 也 是 对 开始 的 焦点 问题 的 解答 。 可 派 一 位 代表 大 声 读 出 卡片 群 组 的 内 
容 ， 总 结 归纳 这 个 卡片 群 组 的 关键 词 ， 并 讨论 这 个 卡片 群 组 的 主题 思想 是 什么 ， 归 纳 出 最 佳 
答案 。 

4. 概念 提出 

通过 以 上 几 个 步骤 ， 明 确 了 焦点 问题 ， 提 炼 了 群 组 关键 词 、 主 题 思 想 ， 从 开始 的 众多 信 
息 中 ， 梳 理 清楚 了 用 户 真 正 想 要 的 是 什么 ， 这 似乎 像 是 行走 在 黑暗 的 小 路 上 ， 慢 慢 看 到 了 一 
丝光 明 的 感觉 。 此 时 设计 师 对 用 户 需求 越 来 越 明晰 。 接 下 来 的 工作 是 需要 设计 师 将 这 些 概念 
具体 化 ， 提 炼 出 关键 点 ， 为 下 一 步 的 设计 做 准备 。 这 时 需要 用 到 类 似 于 Mind Map, XMind 
Pro 的 软件 完成 〈 也 可 以 根据 自己 的 喜好 选择 一 款 流程 图 、 脑 图 软件 ) (图 2.13) 。 图 2.14 是 
在 课堂 上 ， 学 生 以 主题 为 “跑腿 猿 ”APP 绘制 的 一 款 系统 流程 图 。 
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2.14 “BRE” APP 系统 流程 图 / 学 生 任 嘉 禾 作品 
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2.2.3 创建 问题 

在 设计 开始 之 前 ， 设 计 师 需 要 对 设计 内 容 、 设 计 目标 、 达 成 效果 等 有 明确 的 认识 ， 这 也 
是 为 之 后 的 人 物 角 色 设 定 和 故事 版 编写 提供 好 的 向 导 。 前 面 我 们 已 经 对 目标 用 户 进行 了 定 
义 ， 对 用 户 数据 进行 了 整理 ， 这 时 我 们 应 从 已 有 的 资料 中 梳理 出 问题 ， 建 立 用 户 需 求 。 

1. 资料 收集 

收集 大 量 的 数据 资料 是 必 不 可 少 的 步骤 ， 前 面 我 们 已 经 对 用 户 进行 了 相应 的 定义 和 数据 
整理 ， 做 好 了 部 分 资料 收集 工作 。 但 这 还 是 不 够 的 ， 除 了 用 户 自身 的 资料 信息 外 ， 还 应 有 外 
在 客观 的 数据 ， 例 如 ， 用 户 所 处 的 是 一 个 怎样 的 环境 、 相 关 类 似 的 竞 品 分 析 等 ， 这 些 信息 都 
构成 了 前 期 素材 内 容 。 资 料 收集 可 以 分 为 直接 资料 搜集 和 间接 资料 收集 。 直 接 资料 收集 可 以 
通过 访谈 、 观 察 、 焦 点 小 组 、 问 卷 等 调研 方法 开展 ， 获 得 第 一 手 资料 ; 间接 资料 收集 可 以 通 
< nsn 

2. TAER 

i a ~、 那么 很 
s a 用 户 需求 对 于 我 们 后 面 
的 任务 设计 非常 重要 ， 在 需求 了 解 过 程 中 ， 一 种 情况 征用 户 清 楚 自 己 想 要 什么 ， 另 一 种 情况 
是 用 户 自己 并 不 清楚 自己 的 实际 需求 。 第 于 Rk 我 们 只 需要 多 站 在 用 户 的 
角度 思考 ， 通 过 一 定 的 调研 、 沟 通 、 交 流 手段 即 可 。 第 二 种 情况 相对 复杂 些 ， 需 要 耐心 挖 
气 、 分 析 甚 至 亲自 体验 用 户 的 实际 需求 

3. 需求 文档 > 

用 户 需 求 只 是 一 个 模糊 的 概念 ， Cpe 
实在 纸 面 上 ， 将 其 转化 WR. kaise 
使 设计 "Y: 任务 。 






































字 、 图 形 将 这 些 模糊 的 意向 落 
斗 背景 团队 成 员 更 好 地 了 解 项 目 ， 


2:2:4 meme F> 

在 这 之 前 y 我 们 对 用 户 的 需求 已 经 有 了 充分 的 了 解 ， 在 解决 了 Who, What, Why 这 些 
问题 之 后 ， 进 一 步 对 设计 进行 阐述 分 析 ， 在 以 用 户 为 中 心 的 设计 方法 中 ， 人 物 角 色 的 设 定 是 
常用 到 的 方法 。 

交互 设计 之 父 Alan Cooper 在 1999 年 出 版 的 《软件 创新 之 路 》 中 提出 了 “人 物 角 色 ” 的 
概念 。 它 是 一 个 用 来 帮助 设计 人 员 和 团队 成 员 了 解 并 记 住 用 户 需 求 的 工具 ， 角 色 的 属性 都 是 
从 大 量 真实 的 数据 中 得 来 的 。 

这 里 的 人 物 角色 并 不 是 现实 中 真实 存在 的 ， 但 是 他 们 拥有 我 们 观察 到 的 人 的 真实 的 行为 
和 动机 。 如 同 物理 学 家 创建 原子 模型 一 样 ， 交 互 设计 师 通 过 观察 到 的 用 户 行为 ， 以 及 通过 对 
数据 模式 的 直观 综合 来 创建 用 户 模 型 。 人 物 角 色 由 用 户 模型 、 心 理 模 型 、 用 户 行为 这 些 因素 
系统 构建 而 成 。 

设 定 人 物 角 色 的 优势 如 下 。 

(1) 达到 交流 的 目的 : 设计 师 、 程 序 员 共 同 完成 产品 的 设计 开发 过 程 ， 通 过 人 物 角色 的 内 容 
叙述 ， 能 够 帮助 他 们 站 在 用 户 的 角度 看 问题 ， 更 加 理解 用 户 行为 的 细微 差别 ， 就 像 小 说 中 的 人 物 
角色 一 样 ， 设 计 中 的 人 物 角色 构建 也 来 源 于 真实 生活 ， 这 样 团 队 成 员 也 能 够 真实 地 接触 到 用 户 。 















































(2) 达到 测试 设计 方案 的 目的 : 我 们 可 以 基于 人 物 角 色 对 设计 方案 进行 检查 、 测 试 ， 发 
现 问题 及 时 修改 。 虽 然 不 能 代替 真实 的 用 户 测试 需求 ， 但 为 设计 提供 了 相对 较为 真实 的 检查 
方式 ， 检 查 设 计 中 的 问题 ， 在 模型 中 进行 低 成 本 的 多 次 修改 ， 从 而 达到 最 优 目标 。 

(3) 达到 后 期 产品 推广 宣传 的 目的 : 后 期 对 产品 进行 推广 宣传 的 时 候 ， 可 以 重新 调整 人 
物 的 组 织 结 构 ， 为 宣传 销售 及 其 他 策划 活动 提供 信息 。 

通常 人 物 角色 不 宜 过 多 ， 一 般 3~5 个 ， 根 据 实际 项 目 情况 来 定 ， 有 的 甚至 只 有 一 个 人 
物 ， 角 色 过 多 容易 分 散 内 容重 点 。 人 物 角 色 来 源 于 真实 世界 的 观察 和 数据 ， 一 般 从 观察 到 的 
模式 中 推导 而 来 ， 还 有 的 是 通过 市 场 研究 数据 、 焦 点 小 组 和 调研 等 方式 而 来 。 

角色 应 该 具有 代表 性 ， 如 同 漫画 、 电 视 剧 、 电 影 中 的 人 物 角 色 一 样 ， 这 些 形象 从 生活 中 
观察 、 提 炼 综合 而 来 ,反映 了 生活 中 活生生 的 一 个 形象 ， 用 于 对 用 户 模 型 的 描述 。 人 物 角色 
代表 了 具体 的 个 体 ， 具有 独特 的 个 性 特征 。 

产生 角色 后 ， 应 该 为 角色 设 定 一 个 身份 信息 ， aexewashae - 样 。 人 物 角 色 的 
描述 不 宜 过 长 ， 可 以 有 多 种 方式 。 

有 研究 总 结 出 了 人 物 角色 模型 的 10 AER, T p ONK: OSRIR 
KIRI ORW Ohe: Smpn s 户 曾 使 用 过 的 设备 和 平台 ;: @ 使 

用 习惯 和 兴趣 ，@ 哪 些 必须 做 ， 哪 些 不 可 以 做 ， atsi ERIE 品 的 关系 (图 2.15) 。 
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图 2.15 人 物 角色 模型 的 10 个 要 素 


中”DIY User Personas, http: //www.ux-lady.com/diy-user-personas/ 
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学 生 设 计 的 人 物 角 色 : 电子 书签 再 设计 (图 2.16) 和 校园 二 手 物品 交易 平台 (A 2.17). 
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图 2.16 电子 书签 再 设计 一 一 人 物 角色 设计 / FERAN 
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图 2.17 校园 二 手 物品 交易 平台 一 一 人 物 角色 设计 / 学 生 叶 月 作品 


2.2.5 ”编写 故事 版 

有 了 人 物 角 色 和 角色 档案 之 后 ， 还 需要 结合 一 定 的 情境 与 任务 来 想象 理想 的 用 户 交互 过 
程 ， 用 编写 故事 版 来 定义 需求 ， 依 次 使 用 这 些 需 求 来 定义 产品 的 基本 交互 框架 。 故 事 版 是 理 
清 设计 概念 、 表 达 设 计 创 意 的 方法 。 

故事 版 的 优势 在 于 ， 能 够 以 连贯 的 草图 形式 表达 设计 的 连贯 性 、 流 程 性 ， 能 将 用 户 、 环 
境 与 产品 相互 关联 起 来 ， 生 动 而 形象 地 表达 产品 的 整个 交互 流程 ， 具 有 直观 和 简练 的 特点 。 

1. 故事 版 四 要 素 

故事 版 构建 情境 ， 通 过 讲 故事 的 方法 来 建立 用 户 使 用 的 物品 、 场 景 ， 从 而 发 现 问题 并 寻 
找 解决 问题 的 途径 。 一 般 来 说 ， 一 个 比较 完整 的 故事 版 包含 这 四 个 要 素 : 人 (Human) 、 物 


























(Objects) 、 环 境 (Environment) 、 事 件 (Action) 。 人 是 主体 ， 即 故事 版 的 角色 ， 可 以 是 一 
个 人 ， 也 可 以 是 一 群 人 。 物 既 可 以 是 指 实际 的 产品 ， 也 可 以 指 一 种 功能 ， 既 可 以 是 现实 存在 
的 ， 也 可 以 是 正在 进行 的 设计 创意 。 环 境 是 指 人 活动 的 实际 环境 。 环 境 是 大 背景 ， 反 映 了 社 
会 、 经 济 、 文 化 等 与 设计 研究 相关 的 因素 ， 告 诉 我 们 什么 时 间 在 哪里 等 内 容 。 事 件 指 人 的 交 
互 行为 ， 再 将 人 、 物 和 环境 结合 起 来 ， 构 成 了 整个 故事 的 内 容 。” 
2. 故事 版 的 规范 性 要 求 
(1) 人 物 角 色 介 绍 尽 可 能 详细 准确 。 人 物 基 本 信息 如 : 姓名 、 年 龄 、 职 业 、 个 性 、 爱 好 
及 与 产品 有 关 的 信息 。 
(2) 以 图 文 形 式 冰释 ， 条 理 清晰 、 罗 辑 明 确 、 序 号 标明 准确 。 故 事 版 的 绘制 能 够 较 好 地 
a 场景 、 事 件 之 间 的 关系 ， 以 图 说 话 ， 不 产生 理解 上 的 歧义 。 
(3) 文字 介绍 尽 可 能 以 精准 的 词语 进行 概括 ， 注 重 语 言 组 织 与 
(4) 体现 主要 人 物 、 人 物 经 验 、 使 用 环境 、 产 品 或 工具 、 Aen TEERAA 
AAD 























纳 总 结 的 相互 关系 。 

3. 故事 版 的 表现 手法 

可 以 是 纸 面 绘制 ， 也 可 以 是 电脑 绘制 。 a 绘制 工具 可 以 是 铅笔 、 
马克 笔 、 彩 色 铅 笔 等 ， 表 现形 式 可 以 是 速写 . 电脑 绘制 可 以 使 用 数位 板 在 
Photoshop. Illustrator 中 绘制 ， 在 Photosheal lustrator A HEE: 工具 可 以 模拟 出 素描 画 、 水 
彩 画 等 效果 ， 还 能 绘 ann 一 种 单 色 平 涂 的 平面 化 效果 ， 不 
含有 任何 的 阴影 、 质 感 这 个 阶段 内 祝 乏 地 表达 出 故事 C 素 及 效果 ， 也 可 在 素材 网 下 
载 相关 的 人 物 、 物 品 、 场 景 等 素材 > 众 而 提高 制作 效 3 卡通 形式 的 故事 版 ， 能 够 提供 
更 具 亲 和 力 的 视觉 效果 及 情境 代入 感 (图 2.18 至 图 229): L 


~ 
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当然 可 以 ! 我 刚好 基 要 ! 





` . 
上 - WAPKESN? 
x 我 在 中 南大 学 入市 场 这 里 ! 








图 2.18 故事 版 电脑 绘制 : 用 户 在 使 用 易 物 平台 / FERRED 


D IR. HAHM]. 北京 : 电子 工业 出 版 社 ，2014. 
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图 2.20 故事 版 纸 面 绘制 : 发 现 问题 及 现状 分 析 (二 ) / 学 生 陈 思 作 品 


2.2.6 ”需求 确定 


通过 以 上 一 系列 的 需求 分 析 活 动 ， 我 们 已 经 可 以 明确 需求 了 ， 此 时 我 们 还 可 以 继续 完善 
之 前 的 需求 文档 ， 使 之 更 进一步 指导 我 们 的 后 期 设计 工作 。 


23 ”原型 设计 


2.3.1 什么 是 原型 设计 

原型 就 是 产品 的 原始 模型 ， 是 整个 产品 的 框架 性 设计 。 原 型 是 概念 到 实现 的 过 渡 ， 是 | 
页 面 的 模块 、 信 息 、 人 机 交互 的 形式 ， 利 用 线 框 描述 形式 实现 可 视 化 ， 将 产品 脱离 视觉 设计 ; 
态 ， 进 行 较为 具象 的 表达 。 原 型 设计 是 一 种 清楚 而 高 效 的 方式 ， 是 交互 设计 师 与 PPD、PM、 
站 开发 工程 师 沟通 的 最 好 工具 。 在 创建 完成 应 用 程序 时 ， 我 们 使 用 原型 可 以 节约 一 些 时 间 ， 帮 
助 我 们 将 想法 更 快 、 更 明智 地 表现 出 来 。 原 型 可 以 让 我 们 看 到 最 初 美好 的 想法 在 现实 中 是 如 何 
体现 出 来 的 ， 原 型 能 让 技术 专家 来 预测 问题 ， waya AREPAN s 我 们 做 的 
原型 越 快速 ， 最 终 产 品 将 越 好 。 原 型 的 目的 是 学 习 和 沟通 交流 ， a 完善 的 设计 。 
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原型 帮助 我 们 揭示 和 探讨 用 户 的 需求 ， 设 计 出 开门 "< 性 化 的 解决 方案 。 


2.3.2” 儿 种 常用 原型 设计 


线 框图 、 纸 质 原型 、 ts 就 好 比 建筑 学 上 蓝图 
和 演示 厅 的 关系 ， 蓝 图 即 施工 方案 ， 详 细 描述 该 ; 演示 厅 ， 则 能 给 未 来 的 居民 
提供 测试 和 体验 的 机 会 。 同 样 ， 线 框图 和 原型 We 视觉 稿 
是 给 用 户 观看 的 最 终 展现 效果 。 


1. 线 框图 KSS 
线 框图 原型 设计 法 aumaia kanoan na ERR, JRUT AHAH 
RITIENE, EEIE A DEEA I RRE WEATER SERER 


3909, HEIZE ENEM IRAK PENRE, Tani 元 素 定位 
和 网 站 导航 提供 构思 。 线 框图 作为 一 种 手工 绘制 埃 者 电脑 绘制 的 方式 ， 被 广泛 用 来 调整 、 布 
局 和 重新 设计 系统 元 素 ， 如 图 221 所 示 。 EA 
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图 2.21 REBRE” 


@ http: //creately.com/blog/diagrams/wire-frame-benefits/ 
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线 框图 的 优势 主要 如 下 (图 2.22) 。 

(1) 较 容易 描绘 出 一 个 完整 的 系统 。 

(2) 线 框图 使 开发 人 员 更 容易 组 织 和 建立 系统 或 产品 组 件 之 间 的 关系 。 
(3) 线 框图 使 修改 成 本 更 低 。 
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2. 纸 质 原型 NA 25 

纸 质 原型 类 似 于 草图 ， 是 设计 之 初 最 便捷 、 最 快速 的 于 种 原型 设计 方式 ， 它 的 优势 在 于 

不 受 场所 和 设备 的 限制 ,一 次 性 成 型 ， 同 时 也 无 法 反复 修改 。 纸 张 、 笔 是 我 们 在 设计 创意 

时 随时 可 以 使 用 的 工具 当 我 们 有 创作 灵感 的 胖 候 ,快速 拿 起 笔 在 纸 上 描绘 ， 可 以 将 瞬间 

的 灵感 捕获 下 来 二 意 比 使 用 电脑 更 便捷 ， 也 更 易 修改 。 在 教学 过 程 中 ， 教 师 经 常 提醒 学 生 

养 成 随手 画 速 写 记 录 灵 感 的 习惯 。 依 据 多 年 的 教学 与 设计 经 验 ， 纸 面 上 的 线条 比 计算 机 中 

的 线条 更 有 助 于 我 们 思考 。 我 们 为 什么 要 使 用 纸 质 原型 ， 其 目的 就 是 更 快 地 解决 不 确定 因素 
(图 2.23 和 图 2.24) 。 
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图 2.23 APP 纸 质 原型 、 网 页 纸 质 原型 








图 2.24 画 在 纸 上 的 素描 稿 原型 图 入 
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纸 质 原型 的 特点 如 下 。 
(1) 包容 性 较 强 ， 无 论 是 谁 ， 都 可 以 参与 创建 Ne 

(2) 方便 对 方案 进行 测试 和 修改 ， 降 低 | tn 

(3) 操作 简易 ， 应 用 更 广泛 。 

(4) 由 于 是 低 保 真 ， SS 蕉 本 功 的 设计 决策 。 

3. 低 保 真 和 高 保 真 原 型 

低 保 真 原型 ( re a aa 
KJEND REENA. Taree Gien. 目的 不 是 为 了 打动 
观众 而 是 向 他 们 学 习 。 痊 保 真 原型 一 般 限 于 功能 有 限 的 交 库 原型 ， 描 绘 设计 概念 、 设 计 方 案 
和 屏幕 布局 等 内 容 从 创建 这 些 原型 是 为 了 进行 交流 或 者 用 在 教育 上 。 

使 用 如 纸 ， 笔 藤 刀 、 胺 水 等 工具 将 设计 草图 用 于 创建 博客 系统 的 原型 ， 儿 乎 所 有 的 屏 
# a om, tatem ra 对 交互 形式 的 探讨 (图 2.25 和 图 2.26) 。 

与 高 保 真 原型 相 比 ， 低 保 真 原型 的 优点 是 : 快速 建立 原型 、 不 受 技术 和 设计 能 力 的 限 
制 ， 并 能 快速 地 反馈 。 








2.25 纸 质 剪 贴 原型 


(D http; /www2.warwick.ac.uk/services/its/servicessupport/web/blogs/about/usability/paper 
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图 2.26 任天堂 设计 师 Kazuyuki Motoyama 建立 的 低 保 真 原型 , 


高 保 真 原型 (High Fidelity Prototypes) EMETRE 得 还 有 一 些 细节 尚未 
达到 成 本 的 效果 。 高 保 真 原型 包含 的 元 素 有 : 目标 用 户 、 ET 信息 架构 、 布 局 、 
控件 逻辑 、 尺 寸 、 色 调 、 纹 理 、 风 格 等 ， 这 些 元 素 越 是 被 详细 地 描绘 ， 对 最 终 完整 产 品 的 
“模拟 ”程度 就 越 高 ， 其 效果 就 越 接近 成 品 。 高 保 真 原型 并 不 仅仅 是 指 界面 ， 所 谓 的 “高 ” 
保 真 ， 既 可 以 是 对 外 观 的 高 保 真 、 原 型 的 概念 migm 界面 排版 及 切换 动态 ， 又 可 以 是 
对 交互 逻辑 的 高 保 真 、 I 代码 性 能 、 流 量 消耗 的 高 保 真 。 


2.3.3 产品 原型 设 计 软 件 No 
a) saam houup 是 Re 的 软件 ， 可 以 作为 与 用 户 交互 的 
一 个 界面 草图 。 手 绘 风格 的 产品 原型 设计 工具 于 2008: 年 推出， 在 产品 设计 的 需求 阶段 ， 低 
人 EMO 设计 之 间 (图 2.27) 。 
Š z 
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2.27 ”Balsamiq Mockups 能 做 的 工作 


(2) Axure RP Pro 可 以 快速 地 制作 线 框图 、 流 程 图 、 定 义 和 创 建 HTML 模板 及 MS 
Word 文件 格式 等 。 能 快速 准确 地 创建 基于 Web 的 网 站 流程 图 、 原 型 页 面 、 交 互 体验 设计 、 
标注 详细 开发 说 明 ， 并 生成 HTML. Word 等 格式 。 它 的 优势 在 于 其 功能 强大 ， 可 以 制作 出 
很 多 交互 效果 ， 直 接 通 过 拖 旧 画 出 原型 、 生 成 网 页 ， 可 以 快捷 地 模拟 出 高 保 真 页 面 原型 ， 且 


Pa] 
$; 


上 和 手 操作 容易 。 不 过 Axure RP Pro 生成 的 原型 ， 只 作为 制定 效果 用 ， 不 具备 直接 适用 性 ， 只 
是 配合 解说 ， 并 不 能 取代 解说 ， 重 要 的 还 是 交互 设计 的 想法 、 理 念 ， 以 及 对 视觉 、 用 户 体验 
的 研究 (图 2.28) 。 
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(3) Adobe XD 是 使 UX i 速 、 更 流畅 的 一 款 革 疹 性 创建 工具 ， 它 较 容 易 上 手 操 
作 ， 具 有 突破 性 功能 。 nasin BEURRE S PSl, 快速 创建 线 框图 和 视觉 效果 ， 可 
及 时 预览 和 变更 效果 ， 可 及 时 | tr fruto kue; LMS (图 2.29) 。 

⁄ Ves 








图 2.29 Adobe XD 操作 界面 
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原型 设计 的 软件 非常 多 ， 这 三 款 软件 各 有 特色 ( 见 表 2-2) , 


表 2-2 三 款 常用 原型 软件 的 比较 











_ HTML | iPhone 手 | # | 网 | 、 保 
开发 者 ma | 控件 原 | 机 元 素 诛 | 面 | 页 | S | 真 a 
型 图 | 型 图 | 版 | 版 — | = 
Balsamiq | 美国 加 利 福利 亚 的 | T 
Mockups Balsamiq 工作 室 风格 支持 支持 x k Cus i Kuu 
eRP | 美国 eSofware | 高 保 真 | 支持 | 支持 | v 支持 “| 较 高 | 支持 
To Solution 公司 

Adobe XD | 美国 Adobe 公司 高 保 真 支持 支持 V 较 高 





























这 些 原型 软件 的 共同 点 是 : 提供 线 框图 、 原 型 设计 和 文 ee 
师 做 出 明智 的 设计 选择 ， 并 记录 设计 。 


24 案例 K 


2.4.1 “奖励 地 图 ”移动 APP 


有 一 个 名 叫 “科学 工作 室 ” A 技术 专家 和 战略 家 组 成 
的 世界 级 的 团队 ， tenaa 是 他 们 学 科 领 域 的 专家 。 他 们 能 够 配合 开发 更 好 的 
视野 和 更 智能 的 解决 方案 。 5 “奖励 地 图 P， 目 的 是 帮助 聪明 的 消费 者 
更 聪明 地 购物 并 获得 助 消费 者 管理 个 Zit ely 并 与 其 
他 消费 者 和 零售 商 分 享 他 人 Hum. asa :但 是 一 个 购物 应 用 程序 ， 它 还 努力 寻求 
连接 消费 者 和 零售 高 之 间 激动 人 心 的 新 开始 ,“ 奖 励 地 图 ”只 是 想 着 开发 一 个 吸 
引 零 售 商 和 的 产品 ， 之 后 ， 两 名 消费 项 为 此 带 来 不 同 的 理念 和 挑战 。 他 们 认为 ， 消 费 
者 需要 简单 易 用 并 有 效 地 帮助 他 们 节省 时 间 和 人 金钱 的 一 个 应 用 程序 。 在 另 一 方面 ， 零 售 商 们 
希望 用 “奖励 地 图 ”帮助 他 们 与 消费 者 之 间 建 立 互动 和 交流 的 新 渠道 。?“ 奖 励 地 图 ”的 草图 
和 低 保 真 原型 分 别 如 图 2.30 和 图 2.31 所 示 。 





2.30 手机 APP 草图 
© RAKA: 科学 工作 室 http; //studioscience.com/work/rewardsnap/ 








- 般 来 说 ， 简 单 的 分 享 优 惠 券 和 奖励 卡 的 形式 不 太 会 让 用 户 感 到 满足 ,“ 奖 励 地 图 ”将 
不 得 不 推出 远 远 超 出 现 有 的 移动 购物 应 用 程序 的 功能 。 它 包括 更 高 级 的 奖励 、 登 记 促销 活动 
和 优惠 功能 ， 为 购物 者 提供 零售 商 的 详细 信息 和 与 特定 商店 直接 沟通 反馈 的 能 力 (图 2.32) 。 














手机 APP 高 保 真 原型 


2.4.2 ”美国 运通 的 小 型 企业 再 设计 概念 


这 是 一 项 对 美国 运通 企业 的 前 
策略 、 研 究 、 用 户 体验 设计 、 创 意 








景 和 会 员 卡 网 站 的 再 设计 建议 。 用 户 通 常 的 输出 交互 是 指 
发 展 这 些 大 规模 的 进程 。 





美国 运通 提出 再 设计 它 的 两 个 功能 。 一 个 是 网 站 设计 ， 将 为 美国 运通 小 型 商务 卡 吸引 潜 
在 的 消费 者 。 另 一 个 会 员 卡 网 站 ， 将 成 为 现 有 持 卡 人 的 移动 会 员 网 站 。 


作为 用 户 体验 过 程 的 一 部 分 ， 
业务 人 员 和 持 卡 人 制定 特 
来 指导 最 终 的 UI 设计 。 

很 明显 ， 通 过 现在 这 个 网 站 ， 
会 。 一 般 性 的 消息 未 能 与 特别 需 











可 以 用 于 评估 品牌 和 它 的 竞争 对 手 ， 对 现在 的 网 站 、 面 试 


定 的 角色 ， 完 成 一 个 综合 启发 式 评估 ， 并 最 终 形成 一 组 线 框图 ， 用 





美国 运通 的 国际 客户 服务 正在 失去 与 用 户 创建 对 话 的 机 
的 不 同类 用 户 产 生 共 鸣 。 基 于 我 们 的 见解 ， 新 的 设计 专注 





于 通知 和 协助 小 型 企业 用 户 ， 从 而 鼓励 办 卡 动机 ， 增 加 卡 的 使 用 和 经 常 使 用 在 线 服 务 及 各 类 


工具 。 
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1. 消费 者 观察 研究 一 通过 理解 角色 来 细 分 受众 
这 个 考虑 /购买 漏斗 说 明了 用 户 的 决策 
过 程 的 关键 阶段 有 助 于 对 获得 美国 运通 / 频 
繁 使 用 。 图 2.33 中 还 包含 不 同类 型 的 用 户 
角色 (从 潜在 客户 到 持 卡 人 ) 及 他 们 独特 的 
动机 和 诱因 。 
2. 用 户 画 像 
如 果 一 个 人 物 角 色 与 每 一 个 人 物 角 色 的 
简要 描述 都 不 匹配 的 话 ， 那 么 这 个 人 物 角 色 
可 能 与 特别 用 户 类 型 有 关 。 但 通过 与 用 户 的 
独特 故事 交流 ， 发 现 了 一 些 共 同 的 特点 和 需 
求 。 五 个 详细 人 物 角 色 之 一 的 这 个 角色 是 由 
于 采访 不 同 的 人 而 形成 的 ， 如 图 2.34 所 示 。 


3. 竞 品 信息 "R 
A ! 3 不 同类 型 的 
气泡 是 一 个 映射 方式 ， 用 于 解释 一 个 在 SP n n 


线 生态 系统 品牌 信息 的 广度 和 深度 。 在 万 事 -。 
达 卡 网 站 上 ， 围 绕 着 诸如 数据 管理 、 WA sham, 小 企业 主 、 应 用 程序 等 关键 信息 。 

每 个 主题 都 有 不 同 的 子 主题 ， 如 信息 点 。 数 据 管 理 包括 费用 跟踪 数据 保护 、 员 工 支出 
账户 。 WN ` x > 

万 事 太 卡 也 有 各 种 附属 银行 合作 伙伴 一 BMO、ATB。 .Cuets、NB， 它 们 填补 了 该 品 上 
的 信息 差 并 提供 信息 和 :由 服务 : 在 员工 卡 上 设置 明显 的 伴侣 卡 功能 ， 添 加 利益 和 服务 ， 
如 BMO 银行 的 信息 博客 药水 企业 主 或 卡片 计 axt 

图 2.35 所 示 的 iñi r 208 R Qik PRR Gr -R A) 在 么 一 个 巨大 的 网 络 站 
aane hii AS 
































图 2.34 用 户 画 像 图 2.35 万 事 达 卡 被 识别 及 与 用 户 沟通 网 络 图 





4. 用 户 体验 设计 智能 工具 

需求 问卷 分 析 帮 助 用 户 选 择 一 张 卡片 ， 加 强 信用 卡 比较 工具 和 针对 用 户 的 历史 信息 。 这 
里 有 三 个 不 同 的 、 更 智能 的 模块 用 于 综合 网 站 的 各 种 重要 部 分 。 这 些 模块 能 促进 更 多 的 互动 
和 信息 的 发 掘 ， 帮 助人 们 做 出 决策 ， 如 图 2.36 所 示 。 

5. 用 户 体验 设计 比较 卡片 的 线 框图 

比较 卡片 的 线 框图 ， 如 图 2.37 所 示 。 
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图 2.36 智能 模块 


图 2.37 ”比较 卡片 的 线 框图 


6. 创造 性 的 输出 一 一 主页 设计 

主页 设计 如 图 2.38 所 示 。 

7. 创造 性 的 输出 信用 卡 详细 信息 页 面 

信用 卡 详细 信息 页 面 如 图 2.39 所 示 。 

8. 创造 性 的 输出 一 一 对 小 企业 提示 和 建议 的 博客 
对 小 企业 提示 和 建议 的 博客 如 图 2.40 所 示 。 
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课 后 练习 


1. 选择 一 款 原 型 制作 软件 ， 练 习 原型 图 的 绘制 方法 。 
2. 寻找 日 常生 活 中 不 好 的 设计 和 用 户 点 ， 通 过 “以 用 户 为 中 心 ” 的 交互 设计 方法 ， 为 
其 设计 一 个 有 效 的 解决 方案 ， 需 要 有 完整 的 调研 分 析 、 数 据 整理 、 需 求 分 析 、 原 型 设计 等 步骤 。 









OO 


v 


OOO © OO OOO O OOOOO OO OO O OOOOOOOOOO OOOO OO 
00888880,80880888080888880380880. 08088888888880888808800000000000 
JOO uu uuu u uvvvYvYvvVYVYVVYVYV ez So, O00000 0000000000000000000000000000 
Paape e aoe e ee e e e e eee ded ee e ee eee akedi 


papara ada ape a 0000000000000000000 
200 100000) 一 一 Oo g&o 888888888888888888888oooo8o 
200 000007 OooD 888 OCR 
200 00000) Nooo J O0000000000000000000 O 
200)00000' Dooo ° 8388888888889899999999999g9989| 





00)00000)0OO000000000000000¢C00000(000000000000000000000000000000000 
885888384348888888383838888353888858383338888383833888383333388388388838 
Dooocl)ooceerrrrrerrrrreeceecccccnoooooooooooeocooooooocooooooocooocooo 
20 DE Ee OE ES O00000Q00Q000000000000000000 
o000000000000000000000 O00000 000000000000000000000000 
he O OOO O0000 O0000000 ° Do oO INA N 
oo Nooo oo 
教 字 要 求 和 目标 T 
ER: 了解 信息 设计 的 含义 ， 掌 握 信息 设计 方法 ， 熟 悉 图 
标 和 导航 设计 基本 知识 。 
能 够 独立 设计 制作 信息 图 和 图 标 。 
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信息 设计 是 有 关心 理学 和 用 户 的 使 用 、 学 习 和 记忆 的 生理 习惯 ， 具 休 来 说 就 好 比 颜 ` 
色 、 形 状 、 图 形 和 感知 习惯 。 


一 一 路 易 吉 * 卡 纳 里 * 德 罗 西 








3.1 信息 设计 概述 


3.1.1 信息 设计 的 由 来 

信息 设计 ， 又 称 为 信息 可 视 化 ， 是 试 
图 通过 利用 人 类 的 视觉 能 力 来 闵 述 抽象 信 
息 ， 进 而 加 强人 们 的 认 知 活动 。 信 息 可 视 
化 的 英文 术语 为 information visualization, 
是 1989 年 由 斯 图 尔 特 " 卡 德 、 约 得 麦 金 
利和 乔治 * 罗 伯 撑 共同 创造 出 来 的 。 

事实 上 ， 在 信息 设计 这 个 概念 未 正式 诈 
生 之 前 ， 人 类 便 已 经 生活 在 图 画 和 文字 被 高 
度 整 合 的 信息 空间 里 面 了 。 洞 穴 里 的 壁画 是 
公认 的 最 早 的 信息 传达 案例 (图 3.1) ŽA 
古人 用 象形 文字 记录 历史 ， 为 后 代 传授 知识 。 
可 以 说 ,文字 的 发 明 是 人 类 历史 目的 一声 信 
息 革命 ,文字 是 极度 精简 的 信息 7 惠 国 古代 
汉字 的 造 字 方法 有 象形 ,- 指 事 “ 会 意 、 形 声 
四 法 ， 这 里 不 仅 有 表层 意思 ， 还 有 深层 含义 ， 
文字 也 是 信息 设计 的 原始 自然 阶段 。 x 

地 图 是 以 图 像 为 主将 极其 复杂 的 信息 明 纳 、 概 括 的 一 种 表现 形式 。 地 图 中 包含 着 地 理 
学 、 数 学 原理 》 地 图 的 历史 和 应 用 都 使 其 毫 无 疑问 地 成 为 信息 设计 必 不 可 少 的 组 成 部 分 ， 也 
是 最 早 的 表现 方式 之 一 。 从 17 世纪 的 地 图 绘制 到 如 今 高 精度 的 卫星 图 像 ， 我 们 可 以 看 到 信 
息 设计 的 发 展 是 随 着 人 类 科学 、 技 术 、 文 化 和 艺术 的 发 展 而 发 展 的 ， 如 图 3.2 至 图 3.4 所 示 。 

















图 3.1 古代 刻 在 岩石 洞穴 中 的 壁画 























a 
图 3.2 1908 年 的 伦敦 地 铁 图 ， 来 自 伦敦 交通 博物 馆 图 3.3 1993 年 的 Harry Beck 地 铁 图 设计 ， 来 自 伦敦 交通 博物 馆 
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英国 是 世界 王 景 早 建设 地 铁 的 国家 ，1863 年 马 拥 有 第 一 条 民用 地 铁 。 伦 敦 地 铁 地 图 是 
所 有 现代 地 铁 地 图 的 范本 ， 由 英国 机 电工 程 师 哈里 ， 贝 克 设 计 ， 很 像 一 幅 彩 色 线路 图 。 哈 
里 。 贝 克 的 设计 窒 破 了 距离 和 空间 位 置 的 局 限 ， 解 决 了 地 铁 线 路 交错 、 换 冬 站 复杂 难 闪 等 使 
用 问题 ， 这 个 设计 从 1933 年 开始 正式 启用 。 伦 敦 地 铁 图 也 被 称 为 世界 上 最 易 被 识别 和 最 有 


影响 力 的 交通 地 图 。 


图 表 和 曲线 的 出 现 是 数据 可 视 化 历程 中 一 个 重要 的 里 程 碑 。18 世纪 后 期 ， 苏 格 兰 的 工程 
师 及 政治 经 济 学 家 威廉 普 莱 费 尔 出 版 的 《政治 与 商业 图 解 》 和 《统计 学 摘要 》 表 明了 图 形 学 
正式 形成 。 数 据 图 形 的 诞生 使 人 们 开始 逐渐 使 用 一 些 视 觉 表 达 手 段 来 解释 数据 。 他 还 创造 了 线 


形 图 、 条 状 图 和 人 饼 形 图 ， 








让 读者 能 够 更 清晰 地 了 解数 据 之 间 的 对 比 和 关系 。 他 也 被 称 为 现代 图 


表 和 曲线 之 父 。 许 多 统计 图 形 ， 包 括 直方 图 、 时 间 序 列 图 、 等 高 线 图 、 散 点 图 都 是 在 这 一 时 期 











发 明 的 。 早 期 的 数据 图 





形 在 经 济 学 、 数 学 、 天 文 


学 、 地 理学 、 社 会 学 等 领域 均 有 出 现 ， 虽 然 当 时 








这 些 学 者 并 没有 侧 寻 





外 其 设计 ， 但 这 些 早期 数据 图 


随 着 时 代 的 发 展 成 为 我 们 今天 常用 的 数据 模板 ， 
图 3.5 是 由 Michael Florent van Langren (1600— 


1675 年 ) 绘制 于 1644 


年 的 统计 图 。 





远古 洞穴 中 的 32 图像 记 录 人 类 知识 伦敦 地 铁 介绍 
种 符号 的 进化 
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图 3.5 第 一 由 统计 图 7 


这 幅 图 现在 被 认为 是 第 一 幅 (已 知 的 ) 统计 图 。 以 平面 图 的 形式 绘制 了 在 托 菜 多 到 罗马 
之 间 12 个 当时 已 知 的 经 度 差异 。 在 经 度 上 标注 了 观测 的 天 文学 家 的 名 字 。 这 幅 图 有 效 地 安 
排 了 数据 的 表达 方式 ， 堪 称 里 程 碑 之 作 。 

19 世纪 下 半 叶 是 统计 图 形 的 黄金 时 期 。 法 国 工程 师 Minard 被 称 为 “法 国 的 Playfair” , 
是 可 视 化 黄金 时 代 的 大 师 ， 他 创造 了 可 视 化 历史 的 一 个 传奇 。Minard 于 1869 年 出 版 的 流 地 
图 作品 : 拿破仑 1812 远征 图 ， 被 后 世 学 者 称 为 “有 史 以 来 最 好 的 统计 图 表 ”( 图 3.6) 。 
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这 幅 A 4 9k € $ F k 9p 65 BL S€ B. & 1812—1813 年 间 对 俄罗斯 的 入 侵 。 这 志 
uns E n a is qas ks, 

20 世纪 上 半 叶 ， 统 计 人 员 越 来 越 关心 确切 的 数字 ， 统 计 可 视 化 遇 到 了 阻碍 。20 世纪 下 半 
时， 计算机 处 理 的 出 现 带 来 了 数据 可 视 化 的 复苏 ， 各 种 图 被 迅速 地 纳入 教材 和 业务 应 用 。 在 
生活 中 我 们 可 以 看 到 很 多 关于 信息 可 视 化 的 例子 ;公共 指示 、 报 刊 版 式 、 流 程 图 、 统 计 图 等 。 

信息 设计 的 优势 如 下 。 

(1) 信息 更 易 被 观众 接受 。 

(2) 复杂 的 数据 变 得 清晰 、 易 懂 。 

(3) 将 复杂 的 数据 梳理 成 有 条 理 的 信息 传递 给 不 同 需求 的 受众 。 

(4) 将 不 同学 科 的 专业 信息 运用 视觉 或 其 他 感官 语言 进行 传译 ， 消 除 不 同 专业 之 间 的 理 
解困 扰 。 

(5) 使 分 散 的 数据 信息 变 得 集中 ， 以 便 更 好 地 理解 信息 在 系统 中 的 位 置 。 

(6) 将 理性 的 信息 转化 为 “感官 教育 ”的 方式 传递 给 更 多 的 受众 。 




















D TheFirst (Known) Statistical Graph: Michael Florent van Langren and the “Secret” of Longitude 
@ http: //en.wikipedia.org/wiki/Flow_map and the “Secret” of Longitude 


(7) 将 数据 中 不 可 见 的 深层 内 容 通过 视觉 化 的 方式 展现 出 来 ， 便 于 寻找 问题 及 原因 。 
(8) 无 论 对 于 商业 还 是 学 术 研 究 ， 信 息 设 计 都 是 很 好 的 规划 平台 。 
(9) 是 一 种 有 效 的 设计 教育 、 研究 问题 的 方式， 让 学 习 变 得 更 加 有 人 逻辑 性 。 


3.1.2 ”信息 设计 的 学 科 基 础 


1. 信息 设计 与 符号 

eA 符号 学 (Semiotics 或 Semiology) 是 研究 意义 活动 
的 学 说 。 符 号 就 是 意义 ， 无 符号 即 无 意义 ， 符 号 学 即 意义 学 。 符 号 学 是 20 世纪 形式 论 思潮 
之 集大成 者 ， 从 60 年 代 起 ， 所 有 的 形式 论 归结 到 符号 学 这 个 学 派 名 下 ,叙述 学 、 传 播 学 、 
风格 学 等 ， 也 是 符号 学 的 分 科 。 ”符号 学 是 研究 符号 过 程 、 意 义 、 结 果 的 学 科 。 在 设计 中 的 
作用 就 是 传达 ， 除 了 使 用 价值 ， 美 观 性 和 代表 性 也 是 设计 的 特征 。} A、 
索 绪 尔 从 语言 学 角度 解释 什么 是 符号 时 ， 提 出 了 “能 指 ky laa . 他 认为 ， 
任何 语言 符号 是 由 “能 指 ” 和 “所 指 ”构成 的 ,“ 能 指 ” 指 语言 的 声音 ，“ 所 指 ” 指 语言 
所 反映 的 事物 的 概念 ， 能 指 和 所 指 共同 组 成 了 符号 。 Sau z 人 一 书 中 谈 道 : 
“能 指 是 我 们 通过 自己 的 感官 所 把 握 的 符号 的 物质 瑟 式 ， 所 指 是 符号 使 用 者 对 符号 所 涉及 对 
象 所 形成 的 心理 概念 。 
由 此 可 见 ， 符号 学 内 通 涉及 人 类 行为 意识 庆 的 各 个 层面 和 领域 。 信 息 设计 是 试图 通 
过 利用 人 类 的 视觉 能 力 来 阅 述 抽象 信息 去 WANT ] 的 认 知 活动 。 自 然 信息 设计 归 入 于 符号 学 
说 的 字 PAR. DT WEWER (Klaus Krippendorf) 和 郎 诺 何 (R. Butter) 夫妇 正 
式 提出 “产品 语义 学 ”(Product Semantics) 的 概念 ， 此 概念 正 是 基 于 索 绪 尔 的 符号 观念 。 
E BIPER, "图 像 的 符号 意义 是 需要 后 天 培养 的 ， 不 同 的 文化 教育 背景 
可 能 使 图 像 的 理解 发 生变 化 ， 把 这 个 过 程 分 成 3 个 阶 和 事物 象征 、 图 形 提炼 、 意 义 延 伸 。 
图 3.7 ERILE 常生 活 下 所 热 知 的 垃圾 桶 实物 照片 ， 经 过 图 形 提炼 ， 转 化 成 我 们 在 计算 
机 、 AS t tili fi fB IE, 路 ”> 
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图 3.7 日 常 实物 的 图 形 化 转化 
















































图 形 符号 (Icon) 是 信息 设计 的 一 种 类 型 ， 它 是 以 图 形 为 主要 特征 ， 信 息 传递 不 依赖 语 


© 百度 百科 http: //baike.baidu.com/view/72633.htm 
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言 的 符号 (表达 一 定 事物 或 概念 ， 具 有 简化 特征 的 视觉 形象 ) 。” 例 如， 交通 标志 、 界 面 图 标 
等 ， 是 我 们 研究 的 重点 (图 3.8 和 图 3.9) 。 
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图 3.8 交通 标志 图 





2. 信息 设计 与 统计 学 y YS 

统计 学 是 通过 搜索 、 颇 理 分 析 、 描 述 数据 等 手段 ， CLA SIEISEN 测 对 象 的 本 质 ， 甚 至 
预测 对 象 未 来 的 一 门 综 谷 性 和 学 。 其 中 用 到 大 量 的 过 及 其他 学 和 的 1 专业 知识 ， 它 的 使 用 
范围 几乎 覆盖 了 社会 科学 和 自然 科学 的 各 个 领域 Š 

统计 作为- = 门 历史 悠久 的 科学 ， 共 学 : 理 研 究 可 以 追溯 到 迄今 2300 多 年 前 的 古 希 腊 亚 
ENSA 最 开始 ， 统 计 学 用 来 研究 社会 经 济 问题 ， 经 过 2000 多 年 的 发 展 ， 统 计 学 已 

经 应 用 到 科学 ' 工业 及 社会 问题 上 。20 世纪 ， 随 着 社会 科学 的 发 展 ， 统 计 学 逐渐 运用 在 

信息 设计 领域 此 时 ， 作 为 统计 学 家 和 艺术 家 的 耶鲁 大 学 教授 爱德华 塔 夫 特 (Edward 
Tufte) 开设 了 “统计 图 形 学 ”(Statistical Graphics) 课程 ， 之 后 与 另 一 位 信息 设计 领域 的 
先驱 人 物 John Tukey 共同 发 展 了 这 一 课程 ， 并 于 1982 年 出 版 了 第 一 本 信息 设计 专业 书籍 
The Visual Display of Quantitative Information， 这 本 书 与 其 他 三 部 具有 代表 性 的 数据 可 视 
化 方面 的 著作 : Envisioning Information. Visual Explanations、Beautiful Evidence 获得 了 业内 
较 高 程度 的 肯定 ， 他 本 人 也 被 《纽约 时 报 》 描 述 为 “数据 达 。 芬 奇 ”、 被 《商业 周刊 》 描 述 
为 “图 形 伽利略 ”。 
基于 统计 学 原理 下 的 信息 设计 ， 甚 研究 对 象 主要 包括 具有 统计 特征 的 数据 及 文本 信息 ， 
对 数据 、 信 息 进 行 挖掘 、 选 取 和 整理 ， 并 以 视觉 化 的 形式 表现 出 来 (图 3.10 至 图 3.13 ) 。 


























D 中 国 国家 标准 化 管理 委员 会 。 
® 必 应 词典 http: //www.bing.com/ 
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图 3.10 ”网 站 设计 流程 全 图 一 一 信息 图 ” 


图 3.11 ”比较 不 同时 间 跨 度 的 正常 咖 睦 饮用 者 的 积 著 ° 


图 3.12 Tree of Extinction? 图 3.13 值得 信 地 的 电子 商务 网 站 路 线 图 ” 


//www.199it.com/archives 

//blogs.uoregon.edu/jforcew14g3/2014/03/13/data-visualization/ 

//www.woshipm.com/ucd 

//blog.kissmetrics.com/infographics/ 参观 者 每 一 次 访问 电子 商务 网 站 都 是 一 次 企业 向 参观 者 展示 的 


机 会 。 在 这 里 ， 我 们 可 以 了 解 一 个 企业 是 如 何 做 到 这 点 的 。 
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3. 信息 设计 与 认 知 心理 学 

20 世纪 ， 心 理学 的 发 展 及 对 视觉 的 理性 、 科 学 分 析 和 思考 为 设计 打开 了 一 条 新 路 。 心 
理学 让 设计 和 实验 有 机 结合 ， 让 设计 的 科学 性 更 为 凸显 。 特 别 是 认 知 心理 学 是 专门 研究 人 类 
认 知 习惯 的 学 科 ， 在 信息 设计 中 的 作用 巨大 。 毫 无 疑问 ， 认 知心 理学 对 视觉 传达 的 发 展 也 有 
着 重要 的 意义 。 认 知心 理学 开始 于 20 世纪 50 年 代 中 期 ， 其 核心 是 研究 知识 在 人 脑 中 输入 
和 输出 之 间 发 生 的 内 部 心理 过 程 : 人 脑 获取 信息 ， 信 息 在 头脑 中 的 存储 和 加 工 过 程 ， 人 类 思 
考 、 解 决 问题 及 语言 如 何 产 生 的 。 认 知心 理学 家 用 “信息 加 工 ” 的 观点 看 待人 认 知 的 过 程 ， 
并 认为 知识 是 决定 人 类 行为 的 主要 因素 。 认 知心 理学 的 基本 理论 关于 人 脑 信息 接收 和 处 理 的 
方式 ， 对 于 我 们 如 何 进行 信息 设计 、 如 何 将 信息 高 效 准 确 传递 有 指导 作用 。 

认 知 心理 学 家 认为 ， 人 类 信息 接收 的 过 程 是 由 信息 的 获得 、 储 存 、 加 工 和 使 用 并 伴随 认 知 
从 感觉 到 知觉 再 到 认 知 的 过 程 ， 人 们 通过 视觉 、 听 觉 、 触 觉 、 嗅 觉 、 味觉 来 感知 外 界 信息 ， 视 
觉 获取 信息 的 比例 占 到 了 60% 以 上 ;知觉 是 对 感觉 信息 的 整合 和 解 信息 进行 整体 性 的 
反应 和 有 选择 的 接收 ， 认 知 是 高 层次 的 意识 体验 ， 对 被 感 各 之 间 的 关系 进行 理解 的 过 程 ， 
包括 记忆 、 推 论 、 想 象 等 。 认 知心 理学 的 知觉 原则 类 似 格式 塔 原理 ， 告 诉 我 们 在 做 设计 的 时 候 
如 何 通过 心理 学 原理 做 好 信息 平面 布局 设计 ， 有 具体 | m 看 视觉 呈现 设计 章节 。 这 些 原 理 对 
我 们 的 启示 是 ， 给 受众 的 信息 刺激 应 该 有 层次 RIR. 有 规律 地 进行 。 首 先 ， 在 信息 设计 前 
期 对 信息 按照 类 型 、 a aT E 分 层 处 理 ， 其 次 ， 按 照 人 类 认 知 原理 杭 
理 信 息 组 合 之 间 的 内 在 逻辑 结构 关系 ， main 的 结构 图 示 ; 最 后 ， 用 格式 塔 原理 、 视 觉 手 法 
息 、 符 号 进行 设计 ， TS 小 、 方 向 、 颜 色 、 纹 理 的 变化 (图 3.14) 。 
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图 3.14 Twitter buzz during the 2010 FIFA World Cup/® 
从 这 个 可 视 化 图 表 中 ， 我 们 清楚 地 了 解 全 球 对 话 的 “ 涨 落 ”情况 。 该 图 表 与 立体 图 
片 一 同 生成 。 首 先生 成 StreamGraph 图 ， 再 将 图 片 用 Photoshop 进行 后 期 处 理 ， 生 成 最 终 
的 图 像 (添加 标签 、 标 志 等 ) 。 


3.1.3 ”信息 设计 的 形式 
1. 信息 图 表 


信息 图 表 作 为 视觉 工具 ， 应 包括 图 表 、 图 解 、 图 形 、 表 格 、 地 图 、 列 表 共 六 类 ， 如 
图 3.15 所 示 。 


D http; //gerardnico.com/wiki/data_visualisation/stream_graph 


图 3.15 





BZR. 图解 、 图 形 、 表 格 、 地 图 、 列 表示 侈 
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图 3.16 Webs: 利用 网 站 设 评 给 用 中 贸 
下 美好 的 第 aR” 





图 3.16 信 æ -揭示 了 当 用 户 来 
到 网 站 时 ， 什么 ， 哪 些 方面 
能 够 抓 住 他 们 促进 他 们 购买 。 
因为 现在 网 购 人 群 越 来 越 多 ， 这 个 调 
查 对 于 电子 商务 网 站 的 零售 商 对 客户 
有 个 较 好 的 把 担 。 

图 3.17 中 的 绿色 箭头 表示 用 户 在 
一 个 网 站 上 写 的 点 评 同 时 也 能 够 在 其 
他 网 站 上 看 到 。 比 如 ， 我们 看 到 Bing 
Local 中 的 点 评 有 来 自 Yelp 的 内 容 。 

图 3.18 所 示 为 美国 本 地 点 评 网 站 
信息 共享 生态 图 谱 - 信息 图 。 


中 http: /www.199it.com/archives/63377.html 
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图 3.18 美国 本 地 点 评 网 站 


中 文 互联 网 数据 资讯 中 心 http: //www.199it.com/archives/55948.html 
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息 共享 生态 图 谱 一 信息 图 ” 


2. 动态 信息 图 

动态 信息 图 能 够 将 信息 数据 表述 得 更 加 直观 、 更 加 有 趣味 性 ， 完 成 静态 图 表 不 能 完成 的 
内 容 。 这 是 通过 软件 的 设计 ， 将 数据 以 动态 的 形式 展现 。TED 设计 了 《可 视 化 数据 》 来 帮助 
学 习 者 明白 ， 当 用 令 人 信服 的 方式 益 释 出 来 时 ， 数 据 可 以 提供 强 有 力 的 见解 ， 鼓 励 受众 探索 
更 多 数据 视觉 化 的 用 途 和 形式 (图 3.19) 。 
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图 3.19 2010 年 世界 各 国人 口 寿 命 写 人 均 GDP 之 间 的 关系 " 


3. 信息 动画 可 视 化 

有 一 种 图 文 动画 (Motion Graphic，MG) ， 又 称 为 动态 图 形 或 者 运动 图 形 ， 常 用 于 图 文 
视频 设计 、 多 媒体 CG 设计 等 方面 ， 在 数据 可 视 化 领域 运用 也 越 来 越 多 。 它 能 够 融合 动画 电 
影 与 图 形 设计 的 语言 ， 是 基于 时 间 流 动 而 设计 的 视觉 表现 形式 。 其 在 视觉 表现 上 使 用 的 是 
基于 平面 设计 的 规则 ， 在 技术 上 使 用 的 是 动画 制作 手段 ， 是 平面 设计 与 动画 片 结合 的 一 种 
产物 。 

图 3.20 是 学 生根 据 春 节 的 资料 整理 完成 的 “生活 中 你 知道 多 少 关于 春节 的 那些 事 ” 
作品 。 
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图 3.20 生活 中 你 知道 多 少 关于 春节 的 那些 事 学 生 任 帅 作品 KK N 
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3.1.4 ”信息 设计 的 方法 ` S 

信息 设计 实际 上 是 一 个 通过 视觉 手段， 对 信息 进行 图 形 化 的 组 织 归纳 、 传递 信息 的 过 程 ， 目 
的 是 希望 受众 高 效 准确 地 把 握 、 理 解 、 获 取 复杂 数据 \ 现象 等 信息 。 对 于 设计 师 来 说 ， 需 要 站 在 受 
众 的 角度 ， 思 考 以 何 种 受众 喜欢 而 且 容易 接受 的 形式 ， 把 受众 需要 或 者 希望 得 到 的 信息 进行 创意 设 
计 ， 达 到 信息 传递 的 有 效 性 和 时 效 性 。 这 其 中 需要 完成 视觉 审美 和 符号 系统 的 建构 ， 从 宏观 层面 来 
说 ， 这 是 一 个 对 信息 内 容 进行 饰 选 、 WB. 强化。 重 构 的 过 程 ， 也 是 一 个 设计 思维 训练 的 过 程 。 

1. 信息 的 筛选 " CN "N 

在 进行 信息 设计 之 前 ， 可 能 手 里 的 信息 资料 是 已 经 确定 的 但 在 大 多 数 情况 下 ， 我 们 手 里 的 信 
息 是 不 够 明确 的 ， ot a s sao 对 于 这 些 原始 信息 ， 内 容 是 繁 
多 、 零 艇 、 无 序 、 模 稳 的 ， 就 徐 我 们 在 一 个 陌生 的 车 站 ， 面 对 众多 来 往 车 辆 和 人 群 ， 我 们 视觉 上 是 
混乱 的 ， 找 不 到 想 要 的 信息 。 此 时 我 们 需要 对 其 进行 整理 ， 化 繁 为 简 ， 留 下 重要 的 信息 ， 杭 理 出 合 
理 、 和 为 用 户 有 效 接收 信息 提供 先决 条 件 ， 也 为 后 面 的 设计 打 好 基础 (图 321) 。 








Afghanistan Stability / COIN Dynamics 





生活 中 你 知道 多 少 
关于 春节 的 事 








图 3.21 参 瀑 长 联合 办 公 室 以 清晰 的 方式 展示 阿富汗 的 一 张 数 字 可 视 化 图 形 


DD http: //decisionstats.com/2009/12/23/data-visualization-and-politics/ 


2. 信息 的 提炼 

在 当今 信息 大 爆炸 的 时 代 ， 我 们 每 天 被 网 络 、 信 息 包围 ， 每 天 手 里 离 不 开 手 机 ， 通 过 手 
机 我 们 进行 信息 阅读 、 与 朋友 交流 、 看 节目 等 活动 ， 有 些 人 ， 微 信里 的 好 友人 数 达 5000 A, 
关注 的 公众 号 有 几 十 个 ， 翻 阅 一 遍 朋 友 圈 信息 都 需要 几 个 小 时 。 据 相关 报道 ， 现 今 一 个 人 一 
年 的 信息 接收 量 相当 于 17 世纪 英国 一 个 农场 主 17 年 的 阅读 量 的 总 和 ， 美国 一 项 最 新 研究 也 
显示 ， 一 名 美国 人 日 均 接收 约 34G 信息 ， 其 中 信息 量 相当 于 约 10.05 万 个 英文 单词 的 信息 量 ， 
相当 于 大 脑 每 秒 接触 23 个 单词 。 并 且 面 对 如 此 众多 的 信息 ， 人 们 越 来 越 不 愿意 付出 太 多 的 
时 间 来 掌握 ， 他 们 希望 接收 信息 的 过 程 是 高 效 的 。 因 此 ， 设 计 师 在 做 信息 设计 时 需要 想 办 法 
对 信息 进行 提炼 ， 以 清晰 简洁 、 易 于 阅读 为 原则 ， 将 信息 内 容 中 的 宛 余部 分 进行 删 碱 。 除 了 
对 文字 内 容 进行 提炼 外 ， 符 号 系统 也 是 需要 提炼 的 。 重 要 的 内 容重 点 圈 出 来 ， 为 下 一 步 的 信 
息 强化 做 准备 (图 3.22) 。 人 入 
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图 3.22 维基 解密 世界 大 使 馆 电缆 地 图 "由 插画 者 Finbarr Sheehy 向 《 卫 报 》 提 供 


3. 信息 的 强化 
前 文 我 们 在 信息 内 容 提炼 的 基础 上 将 重要 的 、 重 点 的 内 容 进 一 步 强化 ， 这 是 为 了 更 好 地 


DD http: //pages.vassar.edu/acs/open-data-tools-for-information-visualization/ 
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增强 信息 认 知 力 ， 减 少 对 信息 的 不 确定 性 和 模糊 性 。 在 信息 的 强化 设计 中 ， 应 突出 表达 重要 
信息 的 属性 、 特 征 ， 明 确信 息 之 间 的 结构 关系 。 在 内 容 设计 上 ， 将 文字 最 大 限度 地 转化 成 可 
视 的 图 形 、 图 标 ， 以 图 例 的 方式 表达 内 容 之 间 的 关联 性 ， 在 符号 系统 设计 上 ， 还 应 该 通过 色 
彩 、 概 括 地 强化 图 形 ， 为 突出 信息 内 容 服务 ， 吸 引 读者 的 注意 力 (图 3.23), 
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图 3.29 “以 耶鲁 大 学 为 首 的 团队 最 近 发 布 了 对 近 万 种 生 阁 类 的 详尽 数据 可 视 化 研究 。 因 最 新 物种 的 多 样 性 不 断 增加 ， 
该 数据 显示 鸟 类 中 多 样 性 的 变化 率 BEEE TIRER DNA 所 包含 的 地 理 信息 到 目前 所 知 的 9993 种 物种 记载 资料 。" 


4. 信息 的 重 构 > SOP 
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较为 直观 的 可 视 化 图 形 的 过 程 。 图 形 比 文字 更 为 直观 、 更 易于 沟通 ， 也 更 容易 引起 人 们 的 
注意 力 。 抽 象 降 源 的 文字 不 容易 被 理解 一 一 

但 是 人 们 所 数 关 的 视觉 符号 就 容易 被 接 














“a away ja Authorities Urge Continued Authorities Urge 
受 。 信 息 图 形 化 设计 解决 后 ， 就 需要 将 Viqilance on Swine Flu Continued 
单个 的 信息 元 素 进行 整合 、 重 组 ， 达 到 Vigilance on 
整体 的 完整 性 (图 3.24) 。 N Swine Flu 


3.1.5 ”信息 设计 的 流程 

任何 设计 都 有 相应 的 设计 步骤 和 流 
程 ， 信 息 设 计 也 不 例外 ， 信 息 设 计 的 流 
程 概括 起 来 分 为 如 下 几 个 步骤 : @ 数 据 
收集 分 析 ， 外 提炼 信息 ， 回 设计 表现 形 
式 ，@ 组 织 信息 逻辑 结构 ，@@ 视 觉 设计 。 
图 3.25 是 信息 图 表 的 设计 流程 。 图 3.24 ”以 色 块 面积 作为 单元 划分 的 信息 图 “ 





D http; //www.united-academics.org/earth-environment/data-visualization-every-living-bird-on-earth/ 
® http: //blog.2modern.com/wp-content/uploads/2010/10/6a00d834522c5069e201156f83ba40970c-pijpg 





3.2 ”信息 图 标 设计 


3.2.1 图 标的 定义 


外 
义 的 图 标 是 指 具有 指 代 意 义 的 图 形 符 导 光 它 其 有 高 度 浓 台 





图 标的 英文 是 Icon， 最 初 来 源 于 希腊 语 ， 原 义 为 图 像 ， 来 源 于 古代 宗教 ， 它 的 意 
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你 的 设计 如 何 描述 你 


标 是 具有 明确 指 代 含义 的 计算 机 图 形 ， 使 -> 不 标 是 或 功能 可 以 有 更 直观 的 操作 方法 。 广 
息 、 便 于 记忆 的 特性 。 


是 用 简 





笔画 表达 一 个 肖像， 没有 美术 的 明 圈 线条 对 比 ， 也 没有 油画 的 色彩 区 分 ， 只 勾画 出 重要 的 、 反 
映 特征 含义 的 轮 廊 面 面 ， 也 可 以 被 翻译 为 简 笔画 、 图 形 符号 、 线 描 ， 在 科技 领域 叫做 示意 图 


浓缩 民 

















像素 等 。 文 件 格式 有 JPG. BMP, GIF, PNG. ICO 等 (图 3.26) , 


Downissa Onire video 





图 3.26 不 同 尺寸 的 图 标 


DD http: /www.woshipm.com/ucd 


© KF, ÆRU, DRI . 基于 认识 心理 学 的 计算 机 图 标 研究 [本 . 微 电 子 学 与 计算 机 ， 


图 标 是 介 于 图 形 图 像 用 户 界面 与 用 户 之 间 的 = 个 可 视 化 载体 ， 具 有 形象 化 、 视 觉 化 的 高 
图 标 可 以 有 不 同 的 表现 形态 ， 从 动静 上 可 芬 为 静态 图 标 和 动态 图 标 ， 静 态 图 标 我 们 
态 图 标 一 般 较 少 ， 一 些 互动 性 较 强 的 导航 、 按 钮 等 ， 会 为 图 标 增添 一 些 动态 效 
动态 图 标 。 依 照 表 现 手法 可 以 分 为 扁平 化 图 标 、 肌 理 图 标 、 透 明 图 标 等 。 

图 标的 尺寸 格式 有 16 x 16 像素 、24 x 24 像素 、32 x 32 像素 、64 x 64 像素 、128 x 128 
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索尼 (SONY) “make 
believe” LOGO 口号 


BERT 
三 星 手机 开机 动画 
2004 (21) . 





3.2.2 图 标的 发 展 
下 了 解 图 标的 发 展 史 ， 其 实 就 是 了 解 图 形 用 户 界面 发 展 史 。 世 界 上 最 早 的 图 标 概念 产生 于 
m 20 世纪 70 年 代 ，1981 年 ， 美 国 施乐 公司 Xerox 在 开发 设备 中 为 了 使 新 用 户 更 快捷 地 使 用 设 
证 备 ， 研 发 了 对 应 的 图 标 ， 此 时 的 图 标 分 辩 率 只 有 72 x 72 像素 (图 3.27) 。 
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图 3.27 1981 年 美国 施乐 公司 Xerox 开发 的 图 标 ? 


1983 年 ， 美 国 苹果 公司 Lisa 操作 系统 的 图 形 界面 同样 是 黑白 色 轮 记 ， 分 辨 率 为 48 x 24 
像素 (图 3.28) 。 x 








G Preferences [Z] LisaGraph [E] Diskette (Z) Clock Œ Clipboard Calculator 





3.28” 美国 苹果 公司 Lisa RERS 


BE, YRZ 司 驻 推 出 了 有 名 的 麦 金 托 什 操作 系统 (Macintosh1.0) 图 标 ， 这 套图 标 增 
加 了 趣味 性 ， 更 加 生动 形象 ， 如 图 3.29 所 未 5- 
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1985 年 8 月 ， 微 软 公司 发 布 了 第 一 个 图 形 界面 操作 系统 Windows1.0 及 推出 其 第 一 套图 
标 ， 这 套图 标 添 加 了 一 些 色 彩 ， 如 图 3.30 所 示 。 
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图 3.30 微软 公司 Windows 1.0 的 图 标 ” 


1987 E, WRZE (Apple Macintosh ll) ， 成 为 首 个 彩色 的 Macintosh 和 Windows 
2.03， 如 图 3.31 所 示 。 








图 3.31 苹果 公司 人 IR (Apple Mecntog A eu 


Si 





1990 年 ， 随 着 技术 的 进步 masi T 02k k 微软 Windows 3.0 推出 了 16 
Gat É69 3 8 32 3-2 Wr 8 C0IUJ SIJ CE 3.32) 。1992 年 ， 微 软 公司 推出 了 
Windows 3.1， 此 时 的 图 标 更 具有 细节 ， 视 觉 效 果 和 和 纶 廓 感 更 强 ， 也 更 便于 识别 ， 具 有 人 性 
化 的 特点 。 此 时 ， ETY 公司 又 推出 了 Macintosh System 7 系统 ， 如 图 3.33 所 示 。 
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图 3.32 MR Windows 3.0 图 标 图 3.33 苹果 公司 Macintosh System 7 t7 ° 


1995 年 ， 微 软 公 司 推出 了 Windows 95 系统 ， 图 标 设计 具有 了 更 多 的 色彩 和 一 个 数 等 距 
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设计 ， 此 时 Windows 95 的 设计 建立 了 更 有 规范 性 的 元 素 ， 任 务 栏 、 菜 单 和 启动 按钮 沿用 至 
今 (图 3.34) 。1997 年 ， 苹 果 公 司 推出 了 Mac OS 8 图 标 ， 图 标 开始 表现 光源 效果 ， 也 出 
“阴影 ”效果 ， 如 图 3.35 所 示 。 
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图 3.34 微软 Windows 95 系 经 
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图 3.35 R MacOS SK: 





2001 年 ， 微 软 推出 了 Windows XOR is 该 系统 色调 采用 饱和 的 颜色 调 色 板 ， 图 标 呈 现 
的 效果 是 由 一 个 光源 和 一 个 半 透 明 阴影 组 成 ， 趣 味 性 更 强 , ,色彩 更 丰富 了 ， 并 且 图 标的 整体 
感觉 更 加 柔和 ， 视 觉 舒适 感 增强 (图 3.36) 。 蕴 果 公 司 推出 的 Mae OS X 系统 ， 图 标 具 有 半 透 
明 材质 感 、 超 光 洋 和 塑料 效果 避 越 来 越 强调 人 性 化 设计 如 图 3.37 所 示 。 








5 z sam 
4 
2 0N? 
了 六 
@ 
> 
s. v. 





图 


3.37 ”苹果 公司 Mac OS X 系统 图 标 


3.36 微软 Windows XP 系统 图 标 


2009 年 ， 微 软 推出 了 Windows 7 操作 系统 ， 图 标 从 视觉 和 外 观 上 均 有 很 大 的 变化 ， 材 
质 透 明 感 更 强 ， 可 辨识 度 也 更 高 了 (图 3.38) 。2012 年 ， 微 软 推出 的 Windows 8 操作 系统 ， 
图 标 呈现 扁平 化 设计 ， 相 比 之 前 的 透明 、 立 体 效果 ， 又 回 到 了 单一 的 色调 ， 无 任何 肌理 、 透 
明 的 扁平 化 设计 ， 如 图 3.39 所 示 。 
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dows 8 系统 图 标 


3.2.3 图 标的 设计 


1. 图 形 创 意 

图 标 是 具有 指 代 意 义 的 符号 ， 是 现实 的 反映 。 图 标 设计 首先 从 图 形 的 创意 开始 ， 图 形 创 
意 设计 是 通过 简洁 几何 图 形 对 抽象 的 语言 文字 信息 如 以 提炼 、 概 括 ， 以 图 示 化 的 手段 表达 语 
义 的 过 程 ， 也 是 一 个 由 抽象 思维 到 形象 思维 的 过 程 % 

以 两 个 相反 含义 的 词组 为 单元 进行 练习 例如 ， 男 女 、 曲 直 、 日 月 、 止 凸 、 走 停 、 南 
北 、 分 合 等 为 单元 ， 用 手绘 的 简单 线条 进行 创作 (图 3.40 和 图 3.41) 。 
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练习 ， 学 生 普 遍 
， 能 够 较 好 地 区 分 图 标 与 图 形 ， 
词 与 现 事物 进行 运用 隐喻 、 拟 物化 手法 将 图 形 很 好 地 表现 此 

O 彭 Fx. A 了 人 的 喜 怒 哀乐 ， 表 情 设计 是 对 人 物 面 部 眉毛 、 有 眼睛 、 鼻 子 、 
嘴巴 的 刻画 描述 ， 传 达 人 物 丰 富 的 内 心 世界 ， 如 图 3.42 至 图 3.45 所 示 。 






\ 维 得 到 了 解放 ， 特 别 是 对 于 刚 接触 图 
且 能 够 运用 发 散 性 思维 积极 地 对 抽象 名 
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(2) 像素 图 标 。 像 素 图 标 是 图 标的 早期 状态 ， 


曾经 流行 过 像素 绘画 ， 像 素 图 标 由 1x1 











的 像素 点 构成 ， 如 图 3.46 和 图 3.47 所 示 。 
(3) 软件 系统 





妈 标 设计 。 软 件 系统 图 标 也 是 我 们 接触 较 多 的 一 种 图 标 
Windows、IOS、 安 卓 系 统 原 版 图 标 形态 外 ， 还 有 各 种 丰富 的 主题 性 图 标 ， 
供用 户 自行 设计 个 性 化 图 标 界面 ， 如 图 3.48 至 图 3.50 所 示 。 


除了 我 们 常见 的 
不 少 系统 平台 可 
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图 3.49 手机 系统 图 标 (一 ) / 学 生 痪 亚 琼 作品 图 3.50 手机 系统 图 标 (二 ) / FEMRE 





Skeuomorphic 


拟 物 化 设计 如 图 3.51 所 示 。 
扁平 化 设计 如 图 3.52 所 示 。 拟 物化 与 扁平 化 设计 的 对 比 见 表 3-1。 
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表 3-1 拟 物 化 与 扁平 化 设计 对 比 
拟 物 化 设计 Flat Design 扁平 化 设计 








Skeuomorphic 





模拟 真实 物体 的 造型 、 质 感 和 交互 方式 , 通过 | 与 拟 物 化 设计 相反 ， 去 高 光 、 纹 理 、 材 质 、 阴 
定义 | 受 加 高 光 、 纹 理 、 材 质 、 阴 影 、 变 形 和 夸张 等 | 影 等 效果 ， 通 过 简化 的 线条 、 抽 象 的 图 形 、 明 
效果 手法 ， 对 实物 进行 再 现 ， 具 有 较 强 的 写实 | 艳 的 色彩 、 符 号 化 的 设计 元 素来 表现 

性 ， 让 用 户 直观 地 理解 图 标 指 代 的 意思 
名 图 标的 质量 、 体 积 感 与 现实 物体 融合 度 | 四 设计 风格 简约 ， 相 比拟 物化 图 标 给 人 焕然 一 














高 ， 人 人 都 能 直观 明了 图 标 含义 新 之 感 
优点 加 能 够 产生 丰富 的 视觉 质感 和 交互 效果 加 简约 化 的 设计 突出 内 容 主题 ， 避 免 了 其 他 多 
— | @ 现 实 模拟 性 强 ， 人 性 化 程度 高 余 装 饰 的 干扰 ， 使 用 户 更 加 专注 于 内 容 本 身 
加 简化 设计 ， 只 保证 良好 的 架构 、 网 格 、 排 版 
布局 和 色彩 运用 。 
缺点 大 多 数 拟 物 化 图 标 具 有 细节 烦琐 的 立体 、 质 | 指 代 性 不 够 明确 ， > sa aaa 视觉 
” | 感 特效 ， 没 有 实现 功能 化 效果 较 理 性 Ç 
< 
2. 扁平 化 设计 X 


扁平 化 (Flat Design) 最 初 运用 于 2010 年 的 Wido Phone 系统 上 ， 当 时 并 不 被 人 们 所 
HES, EF 2013 年 ios7 系统 开始 使 用 的 时 候 ， 才 变 汶 了 设计 潮流 。 扁平 化 概念 最 核心 的 地 
方 就 是 去 掉 了 宛 余 的 装饰 效果 ， 其 装 SREE. 纹理 、 渐 变 、 阴 影 等 能 做 出 3D 效果 
的 元 素 。 它 的 设计 语言 有 Material Design. ` Modern UI 等。 扁平 化 应 用 于 手机 上 ， 更 少 的 按 
钮 和 选项 使 得 手机 界面 干净 整齐 ， 使 用 起 来 稻 外 简洁 ， 而 且 还 能 达到 降低 功 耗 、 延长 待机 时 
间 和 提高 运算 速度 的 效果 。 ， ,> x > 

1) 扁平 化 设计 的 逆 柳 (RI3.53) X 

从 中 国 古 代 的 象形 字 、 会 会 意 < 到 现代 简化 过 其 从 世纪 的 巴洛克 风 络 、18 世纪 让 
洛 可 可 风格 到 现代 主义 风格 ， 时 代 总 是 经 历 着 -不由 繁 到 简 的 过 程 。 te 
设计 上 的 好 处 : :简化 部 分 开发 、 提高 使 用 被 简约 清晰 更 具 美 感 。 拟 物化 设计 为 数码 电子 
设备 普及 入 供 了 更 直观 有 趣 的 辨认 只 度 ， 对面 次 接 船 的 人 及 老人 和 孩子 来 说 ， 提供 了 不 少 
便利 。 但 是 随 着 科技 的 发 展 ， 图 标 界面 的 设计 慢 慢 由 具象 到 抽象 ， 一 方面 ， 大 部 分 使 用 者 已 
熟悉 了 图 标的 含义 ， 另 一 方面 ， 为 了 简化 开发 成 本 ， 扁 平 化 得 到 了 越 来 越 多 的 共识 。 拟 物产 

高 效 ， 刻 意 拟 物 有 时 反而 降低 了 效率 。 扁 平 化 风格 简约 清 
晰 ， 更 具 美 感 ， 让 人 们 摆脱 了 装饰 烦琐 的 拟 物 化 设计 ， 带 来 


Google 了 更 加 轻便 的 图 标 视觉 感受 。 


2) 扁平 化 设计 技巧 




















扁平 化 设计 的 最 初 应 用 是 在 微软 的 Windows Phone 的 平 


( OO le 台 ， 从 图 3.54 中 可 以 看 出 ， 其 整体 效果 统一 而 简洁 ， 装 饰 
8 化 程度 低 ， 信 息 布局 层次 清晰 ， 主 体 突出 。 


在 图 形 设 计 上 ， 扁 平 化 省 略 了 装饰 效果 ， 所 有 的 用 户 界 


面 元 素 精练 、 概 括 、 简 洁 ， 简 单 的 外 形 (和 矩形 或 者 圆 形 ) ， 
gi 一 律 为 直角 ( 极 少 的 一 些 为 圆 角 ) 。 
字体 在 扁平 化 设计 中 是 很 重要 的 一 部 分 ， 一 般 使 用 无 


图 3.53 拟 物化 与 遍 平 化 图 标的 演变 衬 线 字 体 (Sans-serif) 即 黑 体 字 ， 与 此 相对 应 的 是 衬 线 字体 





(Serif) ， 即 宋体 (图 3.55 中 可 以 看 出 两 种 字体 的 可 识别 性 ) 
色彩 也 是 扁平 化 设计 中 重要 的 一 环 ， 色 彩 明度 、 纯 度 普 
更 加 绚丽 ， 也 更 加 丰富 ， 如 图 3.56 所 示 。 








入 ， 比 其 他 设计 风格 的 颜色 
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33 导航 设计 


网 站 设计 的 首要 目的 是 “可 以 帮助 用 户 完成 某 项 任务 ， 获 得 某 项 体验 过 程 ”。 一 个 良好 
的 网 站 体验 ， 其 网 站 导航 发 挥 着 不 可 估量 的 作用 。 网 站 导航 就 如 同 书籍 目录 ， 通 过 目录 ， 读 
者 可 以 使 捷 地 找到 自己 感 兴趣 的 内 容 。 同 样 ， 在 网 站 中 ， 用 户 也 需要 一 个 这 样 的 入 口 以 便 最 
快速 地 获取 信息 ， 导 航 便 起 到 了 这 样 的 作用 。 

在 网 站 设计 中 ， 导 航 的 作用 归纳 起 来 是 : 引导 用 户 快速 寻找 目标 信息 ，@ 反 映 网 站 的 
整体 信息 架构 。 

网 站 导航 是 内 容 的 分 类 ， 其 目的 是 引导 用 户 高 效 地 达成 目标 。 我 们 知道 ， 纸 质 媒 体 的 阅 
读 方式 是 线性 的 ， 而 屏幕 媒体 的 阅读 方式 是 非 线 性 的 ， 它 可 以 打破 传统 的 阅读 顺序 ， 可 以 按 
照 自己 的 顺序 ， 这 样 的 体验 感受 力 更 强 ， 用 户 的 自主 性 更 强 。 导 航 设计 横 跨 了 信息 架构 和 人 
机 交互 两 个 领域 。 
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3.3.1 信息 架构 


信息 架构 (Information Architecture，IA) ， 导 航 类 似 图 书馆 对 众多 书籍 进行 分 类 。 信 息 
架构 决定 了 我 们 用 几 级 分 类 ， 一 个 分 类 里 面包 含 几 个 项 目 。 信 息 架 构 里 面 ， 有 很 大 一 部 分 工 
作 是 分 类 。 对 已 有 的 项 目 、 内 容 ， 通 过 已 知 的 共同 属性 进行 分 组 、 归 类 。 当 我 们 在 进行 导航 
设计 ， 并 对 信息 进行 组 合 时 ， 将 考虑 到 导航 的 深度 或 是 广度 问题 ， 这 个 深度 即 总 类 和 子 类 一 
共有 多 少 层 。 如 果 层 级 太 多 ， 可 能 会 给 用 户 带 来 迷失 感 ， 一 个 很 好 的 原则 是 将 每 一 层级 的 选 
项 数控 制 在 5~9 个 ， 即 7 土 2 原则 。 


3.3.2 ”导航 的 形式 


导航 的 形式 包括 Tab 式 导 航 、 下 拉 导 航 、 抽 展 式 导航 、 情 景 式 导航 、“ 网 站 地 图 ”*”“ 内 容 
简介 ”。 j 
L. 28: 03:57) 
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图 3.57 列表 式 导航 


2. 按钮 (图 3.58) 

















配 上 一 些 有 趣 的 图 片 使 得 单调 的 导航 文字 立马 生动 起 来 ， 凸 显 了 导航 ， 有 的 使 导航 文字 
内 容 图 形 化 表现 更 有 说 服 力 。 
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4. 动 效 背 景 (图 3.60) 
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6. 浮雕 效果 (A 3.62) 
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课 后 练习 


1. 收集 一 组 数据 ， 进 行 数据 信息 的 和 蔓 选 、 提 炼 ， 按 照 信 ， 
态 的 图 表 数据 图 ， 也 可 以 是 动态 的 。 
2. 设计 一 组 富有 主题 意义 的 手机 系统 或 者 软件 系统 的 图 标 。 


息 设 计 流 程 进 行 设计 ， 可 以 是 静 
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教 字 要 求 和 目标 
要 求 : TW. 文字 设计 和 版 式 设计 的 基础 知识 ， 在 设 
计 中 人 能够 融合 品牌 设计 意识 。 


能 够 结合 色彩 、 文 字 和 版 式 设计 。 






色彩 设计 | 一 上 认识 色彩 ， 色 彩 的 对 比 


文字 设计 | 一 > 字体 设计 、 字 号 大 小 
视觉 呈 


现 设计 
版 式 设计 | 一 > 版 式 尺寸 、 版 式 规则 


























品牌 设计 | 一 > 延伸 内 容 




















种 物理 的 特质 ， 而 是 产生 于 大 脑 


* 和 希 伯 特 (Ken Hiebert) ] 








当 用 户 第 一 次 访问 你 的 网 站 、APP 或 者 某 一 界面 设计 时 ， 首 先 会 对 其 色彩 、 字 体 、 版 
式 建立 识别 ， 界 面 的 风格 将 帮助 您 决定 如 何 与 您 的 访问 者 进行 交互 。 在 以 往 的 教学 过 程 中 发 
现 ， 视 觉 艺术 表现 与 个 人 的 先天 审美 和 后 天 对 视觉 规律 的 把 控 密 切 相 关 ， 先 天 对 色彩 形态 的 
感知 方面 ， 我 们 暂且 无 法 通过 短 时 间 的 训练 得 到 很 大 改变 ， 但 是 对 视觉 规律 上 的 把 控 ， 我 们 
可 以 通过 一 些 前 人 总 结 的 定律 及 一 些 例子 让 学 习 者 尽快 掌握 这 些 规律 ， 并 运用 在 设计 中 。 





4.1 色彩 设计 I 

入 
色彩 在 界面 设计 中 占 很 重要 的 地 位 ， 界面 的 整体 色调 反映 耻 该 产品 的 品牌 特性 及 用 户 对 产 
品 的 印象 。 科 学 家 已 经 证 明 ， 人 类 的 情感 会 受 色 彩 的 影响 ， 我 们 看 汉 的 餐饮 店 常常 使 用 红色 和 
黄色 ,如 KFC、 麦 当 劳 、 必 胜 客 等 ， 这 就 是 利用 红 、 黄 两 种 色彩 的 性 格 ， 促进 入 们 的 食欲 和 进 
食 的 快乐 感 。 色彩 在 影响 产品 外 观 视觉 效果 方面 也 起 到 重要 作用 ， 它 比 外 观 形态 更 先 引起 观看 
者 的 注意 ， 特 别 是 在 界面 设计 中 ， 色彩 给 人 以 深刻 的 印象 。 从 人 们 的 视觉 系统 角度 分 析 ， 视 觉 
对 色彩 的 感受 在 最 初 的 20 秒 内 占 到 了 80%, RIRI 20% 是 对 形态 的 感觉 ，2 分 钟 后 色彩 感受 
占 60%， 形 态 感受 占 40%, 5 分 钟 后 色彩 感受 和 形态 感受 各 占 50%， 并 且 这 种 状态 将 继续 保持 。 


S. NN < 
4.1.1 色彩 的 感知 f AS x, 
大 千 世 界 ， 色 彩 丰富 多 彩 ,不 同色 彩带 给 人 的 视觉 和 心理 偷 悦 程度 是 不 一 样 的 。 
Larey s © w 








色 ， 色 彩 之 间 地 存在 性 格 区 别 。 例 如 ， 科 技 类 产品 往往 会 选择 具有 理性 、 冷 静 性 格 的 蓝 色 
调 ， 面向 女性 产品 会 选择 充满 浪漫 、 暖 意 的 粉色 调 ， 与 校园 文化 相关 的 产品 会 选择 代表 了 
校园 朝气 莲 勃 的 绿色 。 色 彩 的 色相 及 其 在 标志 设计 中 的 应 用 ， 如 图 4.1 和 图 4.2 所 示 。 

















图 4.1 色相 图 4.2 各 种 标志 的 色相 组 合 / 学 生 葵 佳宾 作品 
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i 2. 色相 感知 

ed 

z 在 色彩 的 世界 中 ， 红 色 、 O kap 代表 热情 、 活 力 、 激 情 、 兴 奋 、 幸 
面 福 。 蓝 色 、 绿 色 和 紫色 被 称 为 冷色 ， 代 表 理 性 、 平 静 ， 有 和 舒缓 和 放松 的 性 质 。 

计 (1) 红色 。 ed 的 、 热 闹 的 ， 在 东方 人 眼 里 ， 红 色 代 表 了 “好 事 ”， 例 如 ， 





婚庆 、 开 业 剪 彩 、 逢 年 过 节 都 少不了 这 一 喜庆 的 色彩 。 大 红色 代表 激情 、 欢 乐 和 受 ， 粉 色 代表 和 柔 
美的 女性 气质 、 友 谊 或 爱情 ; 暗 红 色 代表 愤怒 、 政 恶 和 3 棕 红色 代表 着 收获 的 季节 。 此 外 ， 
界面 中 需要 有 热 间 、 收 获 等 这 些 氛围 点 缀 时 ， 可 以 适当 增添 红色 元 素 ， 如 图 43 和 图 44 所 示 。 
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图 4.3 使用 红 了 热情 的 氛围 ， 又 使 整 





景 的 中 国 传统 风水 主题 网 页 


(2) 橙色 。 检 色 是 充满 活 为 与 华丽 的 暖色 ， 
常 被 赋予 维生素 C 和 健康 的 概念 ; 象征 着 丰收 、 
设计 元 素 ， 除 了 用 醒目 的 红色 外 ， 橙 色 也 是 具有 


是 红色 与 黄色 的 调和 。 橙 色 能 够 给 人 带 来 愉悦 
Ko ,增加 食欲 。 如 果 在 设计 中 希望 强调 其 此 
知名 度 的 色彩 ， 如 图 4.5 至 图 4.7 所 示 。 






色 ， 以 栖 色 为 主 的 色调 ， 
的 视线 快速 吸引 到 





t 
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js 


(3) 黄色 。 黄 色 是 色彩 的 三 原色 之 一 ， 也 是 所 有 色彩 中 最 明亮 的 色彩 ， 给 人 的 感觉 是 快 


乐 、 充 满 希望 与 活力 。 当 黄色 的 色相 偏 红 ， 便 会 接近 橙色 ， 色 相 偏 蓝 ， 便 会 接近 绿色 。 明 亮 
的 黄色 给 人 以 幸福 快乐 的 感觉 ， 浅 黄色 给 人 以 平静 与 安宁 的 感觉 ， 暗 黄色 或 金黄 色 可 以 使 一 
个 人 想到 古董 。 黄 色 和 橙色 经 常 被 用 来 象征 食物 的 色彩 。 儿 童 的 相关 产品 和 休闲 物品 也 党 


这 个 色彩 ， 如 图 4.8 和 图 4.9 所 示 。 


(4) 蓝 色 。 蓝 色 给 人 的 感觉 是 静 讶 的 、 阴 郁 的 ， 象 征 着 深度 、 稳 定 、 信 任 ， 智 慧 、 真 理 ， 
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同时 又 是 富有 理性 的 。 科 技 公司 、 医 疗 机 构 、 科 研 机 构 等 的 设计 常用 到 这 种 色彩 ， 如 图 4.10 


至 图 4.13 所 示 。 





图 4.8 中 黄色 加 上 平稳 的 页 面 布局 ， 给 人 二 种 稳 运 
而 又 不 失 活泼 的 感觉 I YW 








图 4.9 黄 绿色 与 中 黄色 相 结 合 ,体现 了 层次 的 变化 , 给 
ADEIR. DRZE, SIAU | 童 为 主题 的 RM 格 


1 AAS 








~ 图 4.10 纯度 、 明 度 不 同 的 蓝 色 调 与 白色 相 结合 ， 钱 获 
_ ` ”得 了 画面 的 通 透 感 ， 又 更 好 地 体现 了 办 公 室 的 主题 


,how much 
water did you drink today? 


图 4.11 ES, BEWSA, GAME. F, OA 
了 科技 感 的 主题 





4.12 ， 浅 蓝 灰 色 营造 了 一 个 不 失 稳重 又 较为 理性 的 首 
页 效果 
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(5) 绿色 。 绿 色 代表 着 希望 、 生 命 、 健 康 、 青 春 
的 黄色 之 间 ， 在 界面 设计 中 ， 可 以 使 用 这 个 色调 获 和 全 
所 示 。 









题 的 网 页 里 是 再 


和 为 过 渡 色 ， 使 其 更 加 清 曾 


(6) 紫色 。 紫 色 是 红色 和 蓝 色 的 组 合 ， 因 此 既 充满 激情 又 让 人 感到 放松 ， 它 还 是 一 个 浪 
漫 的 色彩 ， 给 人 以 忧郁 、 优 雅 、 高 。 低 纯度 的 紫色 比 高 纯度 的 亮 紫色 更 能 给 人 积 
的 印象 ， 如 图 4.16 和 图 4.17 所 示 。 

前 面 认识 了 不 同色 彩 的 属性 及 在 界面 设计 中 的 应 用 ， 接 下 来 以 界面 中 色彩 所 占 的 比重 和 
作用 对 其 进行 分 类 ， 可 将 一 个 界面 中 的 色彩 分 为 主 色 调 、 辅 助 色 、 背 景色 、 安 全 色彩 及 特殊 
的 纹理 应 用 。 

(1) 主 色调 。 主 色调 是 指 界面 中 面积 最 大 的 色彩 ， 它 贯穿 所 有 的 页 面 ， 出 现 次 数 也 最 多 。 
不 同 的 主题 ， 应 根据 其 内 容 选 择 合适 的 主 色调 ， 如 图 4.18 和 图 4.19 所 示 。 

(2) 辅助 色 。 辅 助 色 用 来 烘托 主 色 调 ， 对 画面 其 他 色彩 起 强调 或 缓冲 调和 的 作用 ， 
如 图 4.20 所 示 。 

(3) 背景 色 。 背 景色 又 称 底 色 ， 直 
















出 界面 主题 的 重要 元 素 ， 如 图 4.21 所 示 。 
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图 4.20 辅助 色 与 主 色 洞 的 关系 
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图 4.21 WUEGHAAROMA 


(4) 纹理 。 有 些 界面 背景 除了 通常 我 们 看 到 的 纯色 外 ， 根 据 主题 需要 可 对 背景 添加 各 种 


纹理 效果 ， 以 此 增添 界面 的 生动 感 。 使 用 背景 纹理 可 以 创造 出 较为 个 性 或 富有 视觉 冲 
页 面 设 计 。 


击 力 的 


纹理 是 想象 力 与 创造 力 的 结晶 ， 纹 理 的 取材 可 以 是 来 自 大 自然 的 水 、 天 空 、 岩 石 、 花 
草 、 砂 石 ， 还 可 以 是 计算 机 生成 的 几何 纹理 。 下 面 就 界面 设计 中 常会 用 到 的 纹理 效果 进行 


介绍 。 
四 木质 纹理 效果 。iBooks 的 图 标 及 界面 曾经 就 是 木质 纹理 的 处 理 方式 ， 仿 制 现实 
架 木 质 纹理 效果 ， 如 图 4.22 所 示 。 


中 的 书 


加 纸张 纹理 效果 。 纸 张 纹理 效果 是 模仿 报纸 的 色调 或 者 揉 皱 的 纸张 肌理 感 ， 给 人 更 为 亲 


切 的 视觉 感受 ， 如 图 4.23 所 示 。 

加 布 纹 效果 。 布 纹 效果 往往 应 用 于 以 裁剪 、 手 工 等 为 主题 的 界面 设计 中 ， 如 
所 示 。 

图 几何 纹理 效果 (图 4.25) 。 几 何 纹理 规整 而 富有 节奏 和 变化 ， 常 用 来 做 背景 ， 
衬 主题 气氛 。 











图 4.24 
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4.1.2 色彩 的 对 比 


1. 纯度 对 比 

设 从 色彩 的 不 同 明度 和 纯度 上 ， 可 以 产生 很 多 有 趣 的 色彩 方案 。 在 这 里 ， 我 们 谈 谈 色 
计 彩 的 纯度 和 明度 之 间 的 差别 。 图 4.26 是 Photoshop 的 拾 色 器 ， 其 中 也 (Hue) 表示 色相 ; S 
(Saturation) 表示 饱和 度 ， 是 指 颜色 的 强度 或 纯度 ; B (Brightness) 表示 亮度 ， 是 指 颜色 的 
相对 明 瞳 程度 。 以 黄色 为 例 ， 当 纯度 值 越 高 时 ， 色 彩 的 饱和 度 越 高 ， 当 纯色 值 越 低 时 ， 色 彩 
越 趋 向 于 白色 。 如 果 当 色彩 的 明度 值 越 高 ， 色 彩 越 明亮 ， 明 度 值 越 低 ， 则 色彩 越 趋向 于 黑 
色 ， 如 图 4.27 所 示 。 











图 4.26 Photoshop 中 的 wedge 图 4.27 黄色 的 纯度 和 明暗 对 比 


纯度 对 比 是 指 不 同色 彩 之 间 由 于 纯度 的 差别 而 形成 的 对 比 。 色 彩 纯 度 可 大 致 分 为 高 纯 
度 、 中 纯度 、 低 纯度 三 种 。 未 经 过 调和 的 原色 纯度 是 最 高 的 ， 而 间 色 多 属 中 纯度 的 色彩 ， 复 
色 其 本 身 纯度 偏 低 亿 而 属 低 纯度 的 色彩 范围 。 纯度 的 对 比 ， 会 使 色彩 的 效果 更 明确 肯定 ， 如 
图 4.28 和 图 .4.29 所 示 。 
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图 4.28 EKECAENLREt 图 4.29 ” 莫 色 纯度 对 比 界面 没 计 





2. 明度 对 比 

明度 对 比 是 指 色彩 之 间 由 于 明暗 程度 的 差别 而 形成 的 对 比 。 明 度 对 比 能 够 形成 色彩 层次 
和 空间 关系 。 例 如 ， 黄 色 明 度 最 高 ， 蓝 色 明 度 低 ， 其 他 颜色 属于 中 明度 范畴 ， 非 彩色 中 的 
色 和 黑色 又 属于 明度 中 的 两 个 极端 范畴 。 























“ 满 记 甜品 ”首页 采用 橙色 为 主 色 调 ， 降 低 了 
明度 的 橙色 变 成 褐色 与 栖 色 相 呼应 ， 作 为 背景 色 ， 
按钮 的 色彩 增加 了 明度 ， 白 色 起 到 搬 体 色 彩 
的 效果 ， 使 整个 画面 层次 感 更 丰富 ， 如 图 4.30 和 
图 4.31 所 示 。 

迪奥 (Dior) 官方 网 站 首页 面 主 色调 由 黑白 
灰色 非 色彩 构成 ， 展 示 图 片 中 的 人 物 衣服 也 为 灰 
色 系 。 整 个 页 面色 彩 效 果 单 纯 、 统 一 ， 又 不 失 层 
次 感 。 

图 4.32 所 示 的 案例 是 一 个 纸 制 动 画 3D 效果 的 
互动 展示 网 页 ， 每 一 种 动物 由 30 块 纸 片 组 合 而 成 ， 
共 组 合 成 30 种 世界 濒危 物种 ， 并 介绍 了 它们 的 生 

i X — E 16.32 、 互 动 效果 完成 展 
乡 明度 与 纯度 的 巧妙 搭配 较 好 地 丰富 
了 了 图形， 增强 了 动物 的 立体 效果 ， 做 到 了 形式 与 内 
容 的 完美 结合 。 

3. 补 色 对 比 

在 色 环 中 ， 呈 对 角 的 颜色 即 是 互补 色 关 系 ， 如 
红 与 绿 、 黄 与 柴 、 蓝 与 橙 等 ， 觉 更 鲜明 ， 纯 
度 增 加 ， 称 为 补 色 对 比 ， 如 图 433 所 示 。 

在 图 4.34 中 ， 背 景 由 冷色 系 不 同 纯度 的 蓝 色 
构成 ， 使 用 纯度 、 亮 度 较 高 的 黄色 进行 点 级 ， 页 面 
中 重要 的 按键 也 采用 了 黄色 ， 形 成 较 好 的 补 色 对 比 
效果 ， 便 于 视觉 对 信息 的 迅速 捕捉 。 

对 比 色 的 合理 搭配 ， 能 拉 开 前 景 与 背景 的 空间 
突出 页 面 主体 物 。 尤 其 是 红色 在 主体 物 的 运 
用 ， 能 迅速 传递 视觉 信息 。 

4. 冷暖 对 比 

冷暖 对 比 是 指 由 于 不 同色 彩 之 间 的 冷暖 差别 形 
成 的 对 比 。 色 彩 分 为 冷 、 暖 两 大 色 系 ， 红 、 橙 、 黄 
为 暖色 体系 ， 蓝 、 绿 、 紫 则 代表 冷色 系 ， 两 类 基本 
上 互 为 补 色 关系 。 另 外 ， 色 彩 的 冷暖 对 比 还 受 明 度 

与 纯度 的 影响 ， 白 光 反 射 高 而 使 人 感觉 伶 ， 黑 色 吸 
收 率 高 而 使 人 感觉 暖 ， 如 图 4.35 所 示 。 
图 4.36 所 示 的 网 页 中 ， 几 组 颜色 乍 一 看 感觉 
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鲜艳 程度 都 差不多 ， 饱 和 度 、 明 度 相近 ， 因 此 给 人 
的 视觉 感受 几乎 是 相同 的 。 该 页 面 冷暖 颜色 较为 丰 








富 ， 橙 色 和 蓝 色 是 对 比 最 强烈 的 补 色 ， 还 有 绿色 和 
红色 的 对 比 。 作 为 主 色 调 的 浅 蓝 色 ， 亮 度 较 高 ， 使 


明度 对 比 案例 : 
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Disney 页 面 链接 
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人 沉 问 的 感觉 。 黄 色 、 红 色 、 橙 色 这 些 暖 色调 与 绿色 、 


紫色 、 蓝 色 形 成 了 冷暖 对 











冷暖 对 比 的 应 用 ， 通 常 在 休闲 娱乐 网 站 
-画面 时 ， 其 对 比 效果 极为 强 


4.1.3 人 色彩 分 析 








挑选 合适 和 
为 : 时 
网 站 的 色 







女性 类 、 科 
i 提取 ， 可 以 得 出 如 下 几 种 色 





















































、 食 品 网 


常 初学 者 较 容易 使 两 色相 互 排斥 ， 导 致 画面 色调 不 谐 调 。 


的 色彩 ， 一 般 来 说 也 存在 一 定 的 规律 ， 
、 教 育 类 、 资 讯 类 





站 出 现 较 多 。 将 这 两 个 色 系 的 色彩 安排 在 同 


如 果 把 网 站 按照 主题 内 容 进 行 





的 属性 来 
分 ， 可 分 






J 


儿童 类 等 ， 我 们 使 用 色彩 分 析 软 件 对 各 类 


IB]. 
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versace 页 面 链接 
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奥斯卡 德 拉 伦 塔 
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奥斯卡 德 拉 伦 塔 官方 首页 色彩 分 析 ， 如 图 4.39 所 示 。 
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通过 分 析 总 结 ， 时 尚 类 的 网 页 色彩 大 多 偏爱 灰色 调 ， 如 红 灰 、 蓝 灰 、 深 


ce, S. 





NL 


白 、 灰 是 永 不 过 时 的 经 典 色调 。 


表 4-1 是 分 别 对 资讯 类 、 时 尚 类 、 科 技 类 、 电 商 类 、 教 育 类 、 女 性 类 和 
餐饮 类 额 网 站 做 抽样 调查 ， 总 结 出 其 主要 色调 。 


表 4-1 各 种 不 同类 型 网 站 的 主 色调 


代表 网 站 





资讯 类 


人 民 网 、 环 球 时 报 、 腾 讯 网 




















时 尚 类 香奈 儿 、 古 驰 、 普 拉 达 @@O@ oO 
科技 类 华为 、 中 兴 、 腾 讯 °@@ 

电 商 类 淘宝 网 、 亚 马 逊 、 京 东 网 (KF) 

教育 类 清华 大 学 、 北 京 大 学 、 中 国人 民 大 学 @@ e 
女性 类 兰 兹 、 瑞 丽 、 雅 思 兰 焦 © 00 
餐饮 类 











42 文字 设计 





字体 编排 实际 上 并 不 是 挑选 一 种 字体 或 者 创造 一 种 字体 ， 而 是 将 文本 加 以 塑造 ， 以 


实现 最 佳 的 用 户 体验 。 


一 一 奥 利 癌 .有 赖 兴 施 泰 因 (Oliver Reichenstein) 








文字 的 设计 包括 字体 设计 、 字 号 大 小 设计 等 ， 文 字 作 为 传达 信息 的 重要 载体 ， 在 交互 界 
面 设计 中 尤为 重要 。 文 字 设计 的 最 终 目 的 是 使 用 户 的 阅读 体验 达到 最 佳 状 态 ， 设 计 师 需要 从 
文字 的 大 小 、 色 彩 、 版 式 布局 方面 做 出 更 具 人 性 化 的 设计 。 


4.2.1 字体 设计 


中 文 、 英 文字 体 有 上 百 种 甚至 上 千 种 ， 但 是 我 们 常用 的 也 只 是 i 有 时 候 设计 师 
为 了 映衬 特别 的 内 容 ， rie a o: armena 
过 3 种 ， 否 则 会 令 人 眼花 综 乱 、 无 主 次 之 分 。 

在 屏幕 媒体 中 ， 因 为 受 屏幕 的 限制 ， me 只 有 几 种 ， 这 几 种 又 大 致 分 
为 衬 线 字体 (Serif) 和 无 衬 线 字体 (Sans-serif) , EERIE, 区 别 在 于 字 或 
本 的 笔画 开始 和 结束 的 地 方 是 否 相 细 相 司 ,是 耕作 外 的 装饰 衬 线 字体 (Serif) 强调 了 
每 个 字母 笔画 的 开始 和 结束 更 容易 识别 ! 易 读 性 较 高 ， 传 达 传统 意义 ， 适 合 进行 文本 排版 。 
无 衬 线 字体 (Sans-serif) 就 没有 这 些 额外 的 装饰 ， 而 且 笔 画 的 粗细 差不多 ， 强 调 每 一 个 字母， 
更 具 现代 感 ， 所 以 常常 作 为 少量 强调 性 文 字 出现 ， 适合 文本 疯 标 题 使 用 。 在 英文 中 ， 常 使 用 
的 入 :有 Time New Roman, 无 衬 线 字体 有 Verdana 和 Calibri。 在 中 文中 ， 打 体 是 标准 
的 衬 线 字体 ， 黑 体 是 典型 的 无 吞 线 字体 ， 有 -一段 时 间 比 较 流 行 的 无 衬 线 字体 是 比 黑体 更 雅致 
的 微软 雅 黑 ， 2015 AEJ ESCRIH TIRRI, AET VEA E DERE E 
fk, ENFER EOE AE ERELL DEEE, AE 440 和 图 4.41 所 示 。 

区 文字 体 设计 前 峙 还 会 使 用 到 手写 体 ， 手写 体 是 一 种 既 复杂 又 保守 的 字体 ， 如 图 442 所 示 。 

字体 的 作 衣 应 该 是 呼应 界面 的 设计 意图 (图 443) 。 

















图 4.40 宋体 与 黑体 在 标题 与 文本 段落 中 的 对 比 4.41 英文 字体 Time New Roman 和 Calibri 对 比 4 
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字号 大 小 对 屏 


iPad 这 样 的 小 屏幕 来 说 ， 字 号 太 大 会 


文 使 用 宋体 12px, 
如 图 4.44 和 图 4.45 所 示 。 


10px， 
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- (i 


ONT BY LEONARDO GUBBION 


MODERNE SANS 


CLEAN SANS-SERIF TYPEFACE 
BY MARIUS KEMPKEN 


TYPEFACE 


字号 大 小 设计 


幕 有 限 的 空间 内 ， 是 对 于 手机 、 
又 影 卖 。 通 常 ， 正 
英文 正文 使 用 Verdana 


很 重要 的 ， 因 为 在 屏 特别 和 
字号 太 小 ， 


一 般 使 用 黑体 14px， 


幕 文字 来 说 是 








标题 可 以 适当 大 一 点 ， 





= 
$; 








宋体 12px “读书 无 用 论 ”无 关 读 书 关 平公 平 
ols 年 08 月 0 日 0.31 RAE — 我 有 话说 554 人 者 与 ) iim] 
黑体 12px 
| 读 功 用 的 降低 ， 有 多 方面 的 原因 。 与 其 中 大 众 短视 、 知 识 天 力 ， 不 如 推动 改变 资源 
微软 雅 黑 12px 分 配 和 玫 育 仁 系 的 不 合理 之 处 ， 让 教育 和 人 才 流 动 更 公平 。 


读 忆 于 用 沦 是 一 个 古老 的 话题 。 在 当前 的 社会 环境 下 ,又 有 了 新 富 义 : 以 一 个 人 所 学 知 
识 能 不 能 很 快 转 化 为 财 豆 或 地 位 ， 来 生 量 读书 是 否 有 用 。 

尽管 很 多 人 对 读书 无 用 论 下 为 然 ， 但 近期 一 项 看 起 末 颜 为 专业 的 田野 调查 却 试图 说 
明 ,读书 无 用 论 在 中 国 乡村 的 持 头 ,并 不 是 补 媒 体 故意 泻 染 起 来 的 伪 命 题 ， 而 是 实 实在 在 冲 
击 当下 乡村 社会 的 真 问题 。 


黑体 14px 


Verdana 10px 





ŅHEngE HEW 











图 4.44 字号 大 小 对 比 图 4.45 ”网 络 新 闻 字体 、 字 号 


在 同等 字号 、 字 距 、 行 距 的 情况 下 ， 黑 体 、 微 软 雅 黑 、 RAIRE, 如 图 4.46 所 示 。 
可 以 看 出 靶 黑 字体 是 介 于 黑体 和 微软 雅 黑 之 间 的 样式 ， EERE aE EEE, 比 微软 雅 黑 
又 显得 更 加 正式 ， 具 有 较 好 的 可 读 性 和 辨识 性 ， EERSTEN 选 。 

\ 


S ~ 

















从 最 开始 的 纸 质 媒体 从 最 开始 的 纸 质 媒体 
到 现在 的 屏幕 ， 阅 读 到 现在 的 屏幕 ， 阅 读 
载体 已 经 发 生 了 很 大 载体 已 经 发 生 了 很 大 
的 变化 ， 屏 幕 阅读 已 的 变化 ， 屏 幕 阅读 已 
经 成 为 了 我 们 日 常 获 、、 经 成 为 了 我 们 日 常 获 经 成 为 了 我 们 日 常 获 
取信 息 的 主要 途径 , “到 信息 的 主要 途径 ， 取信 息 的 主要 途径 ， 
手机 、 平 板 电脑 …%” 手机 、 平 板 电脑 …* EN, PBA 


X p a mi. se asa 
> 入 SN 


移动 端 界面 字体 设计 原则 如 下 。 “下 到 

(1) 可 读 性 高 。 由 于 手机 端 屏幕 尺寸 天 小 一 般 在 4-6 寸 之 间 ， 特 别 在 户外 阳光 下 使 用 、 
夜间 使 用 、 其 得 的 环境 中 使 用 时 ， 要 求 屏幕 文字 有 具有 较 高 的 可 读 性 。 

(2) 具有 较 好 的 视觉 层次 感 。 在 一 个 屏幕 界面 中 文字 信息 过 多 的 情况 下 ， 需 要 文字 具有 
较 好 的 层次 感 ， 这 样 能 够 突出 主体 文字 信息 。 可 对 文字 采用 色彩 、 字 号 大 小 、 不 同 字体 的 处 
理 手法 以 进行 区 分 ， 或 者 采用 文字 加 底 图 的 形式 ， 产 生 较 好 的 视觉 层次 感 。 

(3) 字体 种 类 不 宜 过 多 。 在 配色 中 ， 一 个 界面 的 颜色 一 般 不 宜 超过 三 种 。 在 字体 种 类 的 
选择 上 ， 同 样 也 不 宜 过 多 。 文 字 的 本 质 是 作为 信息 传达 的 载体 ， 字 体 种 类 太 多 会 显得 信息 杂 
乱 ， 给 人 本 未 倒置 之 感 。 
4.23 文字 设计 数据 分 析 

通过 对 38 个 不 同类 型 的 中 文 网 页 及 对 应 的 英文 网 页 (如 资讯 类 、 餐 饮 类 、 教 育 类 、 运 
动 类 、 时 尚 类 ) 做 抽样 调查 ， 由 此 我 们 得 出 中 文 网 站 中 标题 使 用 频次 较 高 的 字体 是 微软 雅 黑 
和 宋体 ， 正 文 使 用 频次 较 高 的 字体 是 宋体 和 微软 雅 黑 ， 英 文 网 站 中 标题 和 正文 使 用 频次 较 高 
的 字体 都 是 Helvetica 和 Aria， 如 图 4.47 和 图 4.48 所 示 。 
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Verdana [7 
NBA Calibri EEA 14 | 白色, ge 
Mike Helvetica ~ Sans-seri s |as, me 
po a oa o oss] Emin ma | 
IRANE aves | Helvetica 2.5 y ma SARE Joe] 9 aa 
CEES T Helvetica EI RE 308 yT] sa 
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[Helvetica Helvetica 12 白色 
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图 4.48 38 种 中 、 英 文 网 页 字体 设计 对 外 
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中 、 英 文 网 页 字体 设计 各 参数 对 比 数据 分 析 表 如 图 4.49 和 图 4.50 所 示 。 
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文 版 网 页 字体 设计 各 参数 对 比 数据 分 析 小 结 : 
标题 、 正 文字 体 类 型 以 宋体 为 主 ， 
标题 、 正 文字 体 颜色 以 黑色 为 主 ， 
标题 字号 几乎 没有 统一 (依据 网 站 不 同 内 容 
TE) ; 
正文 字号 以 五 号 和 小 五 为 主 ; 
分 栏 数目 多 为 1-3 Ë, 
正文 行 间距 以 单 倍 行距 为 主 。 


图 4.49 中 文 网 页 字体 设计 各 参数 对 比 数据 分 析 表 8 | 
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图 4.50 ”英文 网 页 字体 设计 各 参数 对 比 数据 分 析 表 


英文 版 网 页 字体 设计 各 参数 对 比 数据 分 析 小 结 : 
标题 、 正 文字 体 类 型 以 Arial 和 Helvetica 为 主 ， 
标题 、 正 文字 体 颜色 以 黑色 为 主 ; 


正文 字号 以 五 号 和 小 四 为 主 ， 
正文 分 栏 数 目 多 为 2-6 Ë, 


V 
Vv 
v 标题 字号 几乎 没有 统一 (依据 网 站 不 同 内 容 而 定 ) ; 
á 
V 
w ”正文 行 间距 以 单 倍 行距 为 主 。 





4.3 版 式 设计 


在 界面 设计 中 ,版 式 设计 虽然 在 视觉 上 不 如 色彩 和 文字 设计 明显 ， 但 其 作用 确 是 很 关键 
的 〈 图 4.51) 。 一 个 界面 如 果 没 有 好 的 版 面 设计 ， 色 彩 、 文 字 、 图 形 这 些 元 素 就 无 法 形成 一 
个 完美 的 整体 ， 不 能 有 效 地 进行 信息 的 传达 。 
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图 4.51 "X 


4.3.1 版 式 尺 寸 


版 式 设计 需要 根据 不 同 的 屏幕 尺 过 
640 x 480 像素 。 FIILE EARO 
VX 









PAA 通常 用 像素 来 代表 屏幕 的 尺寸 ， 如 
十 及 对 应 像素 ， 如 图 4.52 所 示 。 
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(常见 的 宽 高 比 ) 
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(16: 10 屏幕 尺寸) (4 : 3 屏幕 尺寸) 





(iPhone 手机 屏幕 尺寸) (iPad 屏幕 尺寸 ) 


图 4.52 常见 的 屏幕 尺寸 及 对 应 像素 
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4.3.2 ”版 式 规则 


1. 格式 塔 原理 

格式 塔 这 个 名 称 来 源 于 德语 Gestalt， 意 指 “ 形 状 ”和 “图 形 ”， 格 式 塔 原理 也 被 称 为 视 
觉 感知 的 格式 塔 。 它 明确 地 提出 : 眼 与 脑 的 作用 是 一 个 不 断 组 织 、 简 化 、 统 一 的 过 程 ， 正 是 
通过 这 一 过 程 ， 才 产生 出 易于 理解 、 协 调 的 整体 。 格 式 塔 原理 是 感性 场景 的 组 织 规则 。 我 们 
眼中 的 世界 是 由 各 种 复杂 的 物体 及 场景 组 合 而 成 ， 在 某 种 意义 上 ， 把 这 些 抽 象 地 概括 起 来 是 
由 各 种 不 同 颜色 的 点 组 成 ， 各 种 不 同 的 点 进行 空间 排列 构成 了 线 ， 线 构成 了 面 ， 最 终 成 为 我 
们 视觉 中 丰富 多 彩 的 画面 。 

在 格式 塔 原理 中 ， 常 用 的 原理 有 接近 性 原理 、 相 似 性 原理 、 连 续 性 原理 、 封 闭 性 原理 、 
对 称 性 原理 、 主 体 和 背景 原理 、 共 同 命运 原理 。 

1) 接近 性 原理 

接近 性 原理 指 的 是 我 们 视觉 上 看 到 的 物体 与 感受 到 的 物体 是 否 在 一 起 及 如 何在 一 起 。 由 
于 受到 了 物体 之 间 相 对 距离 的 影响 ， 我 们 的 感知 会 将 彼此 之 间 靠 得 近 的 物体 看 成 一 组 。 也 就 
是 说 ,物体 越 接近 ， 其 组 合 在 一 起 的 可 能 性 就 越 大 。/ 在 交互 界面 设计 中 ， 常 用 这 个 方法 进行 
页 面 内 容 的 布局 设计 ， 这 样 有 利于 引导 用 户 的 视觉 流 ,- 方 便 用 户 对 界面 的 解读 ， 如 图 4.53 
所 示 。 














(a) (b) 
(c) (d) 
图 4.53 接近 性 原理 
例如 ，Photoshop 的 工具 栏 和 工具 选项 栏 通过 接近 原则 ， 使 用 分 割 线 对 功能 相同 的 
内 容 、 控 件 、 数 据 进行 分 组 隔 开 ， 这 样 给 用 户 视觉 上 留 下 了 秩序 和 短 时 间 停 顿 休息 的 感 
受 ， 很 贴近 用 户 的 心理 ; PDF 浏览 器 菜单 栏 的 界面 设置 ， 将 同类 型 功能 图 标 编 放 于 同一 组 
(图 4.54) 。 


2) 相似 性 原理 
相似 性 原理 是 指 如 果 元 素 彼 此 相似 ， 那 么 它们 更 加 趋向 被 纳入 一 组 。 如 图 4.55 所 示 , 个 
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图 4.54 接近 性 原理 的 应 用 图 4.55 相似 性 原理 


体 图 形 之 间 是 相同 的 距离 ， 遵 循 予 接近 性 原理 ， 经 过 视觉 生 的 熏 些 相 似 变化 ， 明 上 暗 度 的 变化 
(图 a) ， 颜 色 的 变化 (E b) “大 小 的 变化 (图 c) ， 方 向 的 变化 (图 d) ， 形 状 的 变化 (E e), 
这 些 图 形 被 感知 划分 为 三 个 相 邻 的 成 对 。 

微软 在 Build 2015 KẸ LA T Win10 斯 巴 达 浏览 器 的 正式 名 称 “Microsoft Edge” 及 
正式 图 标 : 蓝 色 的 习 ez 。 这 款 新 浏览 器 的 图 标 让 >Windows 老 用 户 感觉 并 不 陌生 ， 因 为 它 只 
tk IE11 LENA SI”, An 4.56 所 示 。 

















图 4.56 Wino RGR Edge 和 IE11 浏览 器 图 标 


3) 连续 性 原理 

连续 性 原理 看 似 很 简单 ， 即 单 体 或 者 一 组 图 形 当 它们 相互 对 齐 时 将 被 视觉 感知 成 一 个 整 
体 图 形 ， 如 图 4.57 和 图 4.58 所 示 。 

在 直线 上 或 者 曲线 上 的 元 素 比 不 在 直线 或 者 曲线 上 的 元 素 被 认为 更 相关 。 当 用 户 的 目光 
沿 着 一 系列 物体 移动 时 ， 脑 中 会 形成 一 个 逐渐 增强 的 “ 定 势 ”， 如 图 4.59 所 示 。 
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图 4.57 连续 性 原理 图 4.58 连续 性 原理 的 应 用 





图 4.59 ”连续 性 原理 的 应 用 (L) 


在 图 4.60 所 示 的 界面 中 ， 中 间 部 分 进行 子 特别 的 处 理 ， 色 调和 文字 的 变换 增加 ， 但 在 
识别 上 仍然 让 痰 感觉 是 一 幅 整 体 连 续 的 图 。 

图 上 红色 区 域 是 不 同 颜色 的 导航 ， 形 态 一 致 ， 位 置 相近 ， 构 成 了 连续 的 视觉 感知 。 

4) 封闭 性 原理 

如 果 众 多 元 素 组 合成 一 个 封闭 图 形 ， 那 么 这 些 元 素 倾向 于 被 分 组 在 一 起 ， 同 时 连续 性 也 
同样 有 效 ， 如 图 4.61 所 示 。 


(Past Experience Principle) 是 根据 过 去 经 验 “ 元 素 往往 根据 观察 者 的 过 去 
的 经 验 被 感知 ”而 来 。 与 任何 其 他 原理 相 结合 ， 其 他 原理 将 主导 过 去 经 验 原理 。 过 去 的 经 验 
是 独一无二 的 个 体 。 

过 去 经 验 原理 表明 了 ， 在 某 些 环 境 条 件 下 视觉 刺激 会 根据 过 去 的 经 验 形成 分 类 ， 如 果 两 
个 物体 倾向 于 被 认为 具有 相似 性 或 者 两 个 物体 之 间 的 间隙 很 小 ， 那 么 这 两 个 物体 就 很 可 能 被 
认为 是 一 起 的 。 

根据 过 去 经 验 原理 将 单词 中 的 字母 L 和 字母 1 看 成 是 两 个 相 邻 的 字母 ， 而 不 是 根据 封闭 
性 原理 将 这 两 个 字母 看 成 一 体 ， 形 成 一 个 大 写 的 字母 U， 如 图 4.62 所 示 。 

依据 现实 经 验 设 计 的 垃圾 桶 图 标 及 设置 图 标 ， 如 图 4.63 所 示 。 

































图 4.6f 闭合 性 原理 的 应 用 
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图 4.60 连续 性 原理 的 应 用 二) Saa 过 去 经 验 原理 的 应 用 (一 ) 
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2. 编排 规则 





错觉 中 的 视觉 真相 
图 4.63 ”过 去 经 验 原 理 的 应 用 (二 ) 


以 网 页 版 面 编排 为 例 ， 一 般 是 由 标志 、 主 题名 、 导 航 、 内 容 、 页 脚 组 成 ， 依 据 内 容 区 域 


的 不 同 内 容 ， 可 采用 更 


E 富 的 页 面 布局 形式 。 网 页 版 式 格局 具有 多 样 性 ， 有 按照 标准 网 格 线 





布置 的 ， 这 种 形式 有 点 J 
化 脱离 传统 框架 形式 设 it 


L 像 切 豆腐 块 ， 横 、 坚 方向 根据 页 面 内 容 决定 块 面 大 小 ， 有 较为 个 性 
+ 的 。 页 面 布 局 方式 由 页 面 传达 的 内 容 来 决定 (图 4.64) 。 





标题 头 和 导航 可 以 有 多 种 不 同 的 组 合 方式 (图 4.65) 
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wa 入 - 
图 4.65 mon 种 不 同 的 组 合 方式 
J 


N ps sss 可 以 采用 不 同 的 分 栏 : 两 栏 、 三 栏 、 四 栏 等 ， 横 向 
切割 可 以 更 加 细 化 。 
内 容 版 式 分 栏 设 计 如 图 4.66 所 示 。 


4.66 ”内 容 版 式 分 栏 设计 
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内 容 版 式 分 区 域 设计 如 图 4.67 所 示 。 
整体 布局 设计 如 图 4.68 所 示 。 


图 4.67 内 容 版 式 分 区 域 设 计 
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4.68 整体 布局 设计 
aa: 如 何 运用 以 上 on 下 面 我 们 来 对 其 进行 具体 分 
， 就 能 够 清 她 这 fe RR 图 472) 。 
Š: sa. xx A 


kai N 发 者 会 分 别 制作 几 种 站点， 一 个 用 于 台式 电脑 屏幕 显示 ， 一 个 用 
于 手机 或 平板 电脑 显示 ， 这 样 在 无 形 中 加 大 了 工作 量 ， 也 会 带 来 不 同 大 小 屏幕 浏览 网 页 时 的 
视觉 偏差 ， 于 是 扁平 化 设计 和 响应 式 布局 产生 了 。 
响应 式 布局 是 Ethan Marcotte 在 2010 年 5 月 份 提出 的 一 个 概念 ， 简 而 言 之 ， 就 是 一 个 
网 站 能 够 兼容 多 个 终端 (包括 电脑 屏幕 、 平 板 和 手机 等 小 分 辩 率 的 ) ， 而 不 是 为 每 个 终端 做 
一 个 特定 的 版 本 ， 响 应 式 布局 可 以 为 不 同 终端 的 用 户 提供 更 加 舒适 的 界面 和 更 友好 的 用 户 体 
验 。 响 应 网 页 设计 (Responsive Web Design) 是 指 网 页 能 自动 识别 屏幕 宽度 ， 并 做 出 相应 调 
整 的 网 页 设计 。 
图 4.73 是 某 波兰 机 构 为 法 国 农业 信贷 银行 做 的 响应 式 网 页 设计 ， 网 站 的 优点 是 满足 了 
所 有 客户 端的 显示 。 
如 今 ， 网 站 的 响应 更 多 是 标准 的 解决 方案 ， 而 不 仅仅 是 一 个 好 奇 心 。 当 我 们 创建 项 
目 ， 如 法 国 农业 信贷 银行 ， 我 们 的 目标 始终 是 为 所 有 用 户 提供 卓越 体验 ， 无 论 他 们 使 用 
哪 种 屏幕 尺寸 。 
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Pizza Hot 页 面 链接 
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负 空 间 ( 留 白 ) 









eA 简洁 的 页 面 效果 , 布局 M 
k 上 大 量 留 白 ， 巧 妙 利 用 空白 S 

高 页 面 的 易 读 性 和 易 用 视 

:， 空 白 可 以 分 离 出 重要 信 m 

息 ， 使 眼睛 得 到 休息 ,并 给 W 

计 


人 以 冷静 和 有 秩序 的 感觉 。 





lamjamie 页 面 链接 
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色彩 明快 的 大 图 

网 页 中 大 量 使 用 色彩 明快 
的 大 图 ， 如 桃红 、 绿 色 和 蓝 红 
色 。 纯 色 主 色调 使 页 面 视觉 效 
果 主 次 鲜明 ， 有 助 于 迅速 吸引 
用 户 的 注意 力 。 























大 号 文字 

视觉 上 超大 号 文字 能 够 吸 
引 读 者 的 眼球 便于 浏览 ， 宽 敞 
的 文字 空间 布局 使 得 文字 设计 
更 灵活 。 
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淡雅 的 白灰 风格 
色 与 灰色 的 版 式 搭 
配 ， 从 整体 上 带 给 人 清晰 
自然 的 感觉 ， 这 种 大 图 格 
局 使 内 容 一 目 了 然 。 
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一 Colosseotype 页 面 











John Allsopp 曾 说 :“ 我 相信 ，Web 最 伟大 的 优点 常常 被 人 们 视 为 是 限制 和 缺陷 。 灵 活性 
是 Web 固有 的 本 性 ， 作 为 设计 师 和 开发 者 的 我 们 ， 应 该 去 拥抱 它 的 这 一 特性 ， 并 且 要 设计 
开发 出 同样 具有 灵活 性 的 页 面 ， 使 得 所 有 的 设备 都 可 以 访问 ” 。 这 段 话 道 出 了 Web 的 灵活 性 
和 不 可 预测 性 ， 正 是 这 些 特 性 使 得 Web 成 为 独特 的 新 媒介 。 
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44 品牌 设计 





在 教学 过 程 中 ， 常 发 现 学 生 在 对 色彩 、 文 字 、 版 式 均 掌握 的 情况 下 ， 做 出 的 网 页 界面 设 

计 仍 会 感觉 缺少 点 什么 ， 这 一 点 是 什么 呢 ， 左 思 布 想 ， 仔 细 分 析 ， 才 发 现 是 缺少 了 设计 的 全 

局 观 ， 这 个 全 局 观 应 该 从 对 产品 形象 的 球体 包装 来 谈 。 我 们 知道 ， 一 个 人 的 衣着 、 外 和 貌 、 谈 

吐 代 表 了 他 的 个 人 形象 ， 这 些 外 在 形象 也 是 留 给 他 人 的 初始 印象 。 同 样 ， 界 面 设计 犹如 人 的 

外 貌 、 衣 着 、 谈 吐 ， 目 的 是 展示 一 个 特定 的 产品 ， 为 产品 做 整体 的 品牌 设计 ， 而 不 是 局 部 设 

tks et laid ee the 例如 ， 企 业 品 牌 形象 方面 的 
RA 设计、 苹果 品牌 设计 和 小 米 设计 。 














4.4.1 可 口 可 乐 


可 口 可 乐于 1886 年 在 美国 佐治 亚 州 亚特兰大 市 诞生 ， moere 17 亿 人 次 的 消费 者 ， 
大 约 每 秒 钟 售 出 19400 瓶 饮料 ， 成 为 了 全 球 最 大 的 饮料 厂商 。< N ` 

可 口 可 乐 标 志 设计 是 设计 领域 的 经 典 案例 ， 已 有 一 FA (从 20 世纪 90 年 代 开始 ) 的 
历史 鲁 滨 逊 设计 的 斯 宾 塞 体 草书 “Coca-Cola” 字 样 。 iks 六 体 具 有 一 种 悠然 的 跳动 之 态 ， 给 
人 以 连贯 、 流 线 和 飘逸 之 感 。 一 百 多 年 来 ， “HDD VI 设计 进行 了 多 次 修改 ， 但 “Coca- 
Cola” 草 书 字样 只 是 做 了 细微 的 调整 ， 如 图 外 多 所 示 。" 




















DocAcoIA 


During this period, there are 





N dosena of logo variations as the 
4 — logo is drawn differently for 
y ) = labels, print ads and packaging. 
PAN 
wS 
NN 
A 
1960s (wave is introduced) 1985 (New Coke) 
可 口 可 乐 经 典 广告 图 4.74 ”可口可乐 LOGO 发 展 历史 


加 “可口可乐 Coca-Cola 品牌 形象 演变 http: //brandsar.cn/enjoy/enjoy.php?id=186 












































"e 

可 口 可 乐 还 会 就 某 些 国家 或 地 区 当地 的 语言 文字 设计 出 具有 本 土 化 特色 的 Logo， 如 图 4.75 U T 

所 示 。 i 
可 口 可 乐 的 葵 子 造型 也 被 称 为 “世界 上 最 有 名 的 壮 子 ”" ， 如 图 4.76 所 示 。 * 

可 口 可 乐 中 、 英 文官 方 网 页 主 色调 仍然 延续 了 品牌 LOGO 设计 中 的 红色 ， 用 黑 、 灰 辅 B 
色调 衬托 主体 。 英 文官 方 网 页 以 全 屏 的 形式 呈现 ， 右 上 角 大 大 的 LOGO AEn TAE S 
题 ， 以 浅 灰 世界 地 图 作为 背景 图 ， 表 明了 该 网 页 的 官方 性 及 产品 分 布 世界 各 地 的 含义 ,在 底 A 
图 上 有 个 附属 导航 设置 “选择 您 所 在 的 国家 ”， 通 过 这 些 链 接 可 以 跳 转 到 自己 国家 可 口 可 乐 H 





公司 页 面 。 主 图 是 一 个 可 口 可 乐 饮 料 闫 体 和 “open happiness” 标 语 及 一 些 放飞 的 彩色 气泡 
这 些 元 素 进一步 突出 了 品牌 特色 ， 整 个 页 面 设计 颜色 醒目 ， 色 彩 与 图 形 完好 地 结合 ， 版 式 格 
局 大 气 优雅 ， 背 景 图 又 很 好 地 交代 了 整个 品牌 特征 。 中 文 网 页 设计 体现 了 中 文 网 页 的 特点 
一 屏 展示 的 信息 量 较 大 ， 采 用 了 较为 流行 的 扁平 化 模式 ， 主 要 色彩 不 超过 三 种 ， 采 用 大 图 形 
式 ， 如 图 4.77 和 图 4.78 所 示 。 
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图 4.77 可 口 可 乐 英文 官方 网 站 图 4.78 可口 可 乐 中 文官 方 网 站 
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4.4.2 ERA] 

蕴 果 公司 作为 世界 杰出 的 品牌 之 一 ， 基 产品 以 出 色 的 设计 、 开 创 性 的 创新 理念 、 优 秀 的 
用 户 体验 获得 全 球 数 亿 用 户 的 喜欢 。 鞋 果 公司 的 品牌 标志 也 是 世界 公认 的 杰出 设计 之 一 。? 
从 第 一 个 LOGO 诞生 到 现在 ， 佛 果 公 司 的 标志 设计 经 历 了 一 个 漫长 的 演变 过 程 ， 标 志 的 每 
一 次 改变 ， 都 与 产品 和 公司 定位 息息相关 ， 如 图 4.79 所 示 。 








4.79 ”苹果 标志 的 演变 过 程 


蕴 果 公司 的 中 、 英 文 网 站 ,采用 了 与 Logo 同样 的 设计 形式 与 风格 ， 使 得 品牌 的 国际 认 
识 具有 统一 感 。 而 且 第 一 屏 的 界面 都 是 以 大 图 的 形式 展示 了 最 新 产品 ， 并 设置 了 “进一步 了 
解 ” 的 链接 入 口 ， 往 下 翻 页 进一步 展示 了 佛 果 公司 其 他 更 多 的 产品 内 容 。 色 彩 设计 方面 ， 网 
页 色彩 仍然 延续 了 LOGO 的 玻璃 质感 ， 给 人 以 简洁 、 优 雅之 感 。 同 样 的 风格 在 iTunes 上 也 
得 到 了 体现 ， 如 图 4.80 所 示 。 


D 从 苹果 标志 演变 谈 品 牌 标志 的 发 展 http: //wwww.liangzhishu.com/ 
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4.4.3 ”小米 设计 


小 米 创 建 了 一 个 新 的 品类 一 一 “互联 网 手机 ”， 通 过 互联 网 研发 、 发 行 ， 以 电 商 为 主 ， 
从 产品 形态 到 发 行 ， 到 整个 商业 模式 与 传统 产品 商业 模式 大 不 一 样 。 小 米 手机 无 数 微 创 新 的 
功能 和 服务 带 给 用 户 愉悦 感 ， 并 不 断 潜入 用 户 大 脑 。 小 米 做 品牌 的 特点 是 建立 用 户 的 品牌 ， 
即 让 用 户 参 与 进来 。 在 UI 界面 设计 方面 ， 有 专门 的 UI 中 国 小 米 主题 学 院 ， 发 烧 友 们 可 以 参 
与 UI 设计 制作 ， 展 现 自己 的 个 性 。 
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小 米 一 贯 坚持 “直接 可 感知 ”“ 一 剑 封 唉 ”的 设计 理念 。 他 们 在 设计 这 个 全 新 品牌 的 时 
候 ， 第 一 步 思考 公司 的 定义 ， 也 就 是 “我 是 谁 ” 的 问题 ， 围 绕 这 个 问题 展开 很 多 基础 性 工作 : 
让 用 户 知道 你 是 谁 (知名 度 ) ， 即 出 现在 用 户 视野 里 ， 让 用 户 觉 得 你 不 错 (美誉 度 ) ， 即 走 到 
用 户 身 边 ， 让 用 户 真正 爱 上 你 (忠诚 度 ) ， 即 走 进 用 户 的 心里 (图 4.81) 。 


(aiia 5 adila = aiis 


图 4.81 小 米 的 设计 理念 



























































小 米 在 标志 设计 上 遵循 的 原则 是 : 中 文 名 要 易 记 易 传播 ， 是 人 们 早已 熟悉 的 事物 ， 本 身 
带 有 色彩 感 并 富有 情绪 。 所 以 最 终 选 择 了 中 文 名 为 “小 米 ” ， 它 是 五 谷 之 一 ， 温 润 滋养 ， 耳 
熟 能 详 ， 亲 切 平和 。 小 米 的 图 形 设计 ， 是 Mobile Internet (移动 互联 网 ) 首 字母 组 合 “M”， 
也 是 “ 米 ” 的 拼音 字母 。 该 标志 水 平 翻 转 后 近似 少 了 一 点 的 汉字 六 心 ” 字 ， 意 味 着 “让 用 户 
省 一 点 心 ”， 如 图 4.82 至 图 4.85 所 示 。 

















无 论 是 小 米 的 LOGO 设计 、 手 机 界面 设计 ， 还 是 其 网 页 界面 设计 ， 我 们 都 可 以 感受 到 
其 乘 承 的 “直接 可 感知 "“ 一 剑 封号 ”的 设计 理念 ;简洁 的 页 面 风格 ， 统 一 的 色调 ， 色 彩 不 
是 很 绚丽 但 饱和 度 不 低 。 考 究 的 字体 设计 使 整个 产品 界面 温文 尔 雅 。 不 多 不 少 ， 设 有 多 余 的 
内 容 ， 这 种 干 干净 净 的 极 简 风格 对 于 互联 网 产品 来 说 恰到好处 。 








SY 
图 4.82 小 米 识别 系统 部 分 应 用 





图 4.83 小 米 手机 界面 
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小 米 页 面 链接 
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前 面谈 到 了 品牌 LOGO 及 网 站 整体 风格 设计 的 重要 性 ， 我 们 在 平时 的 界面 设计 过 程 中 ， 
还 需要 多 注 产品 品牌 设计 的 整体 把 控 。 众 多 的 屏幕 LOGO 大 致 可 分 为 这 三 种 : 
FLOGO, 例如 “一 号 店 " “搜狐 ”“ 淘 宝 网 ”等 ， 图 形 化 LOGO， 例 如 “印象 笔记 ”“ 高 š 
W GERA” SF, 文字 + 图 形 化 LOGO， 例 如 “新 浪 “百度 ” y ， 如 图 4.86 所 示 。 

文化 特色 决定 界面 设计 风格 。 很 多 生产 运动 服饰 及 装备 的 企业 s; Nike) ， 他 们 的 品牌 理 
念 就 是 把 时 尚文 化 融合 在 体育 文化 之 中 ， 并 采用 了 时 尚 、 美 感 、 活 力 、 生 命 等 文化 元 素 作为 基 
础 理念 。 这 种 文化 特色 是 决定 界面 设计 的 关键 所 在 ， 如 图 4.87 所 示 。 


ez, 淘宝 网 
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Nike 页 面 链接 





后 练习 


1. 整理 10 个 你 经 常 浏览 的 网 页 ， 中 、 英 文 均 可 ， 运 用 以 上 原理 ， 从 色彩 设计 、 文 字 设 
计 和 版 式 设 计 三 个 方面 分 析 其 值得 学 习 借鉴 的 地 方 ， 提 出 进 改进 的 方案 。 
2. 运用 以 上 原理 ， 设 计 一 个 个 人 主页 ， 提 交 一 份 色 彩 方案 和 版 式 设 计 方 案 。 
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教 宁 要求 和 目标 


要 求 : 掌握 交互 界面 设计 应 用 的 现状 及 相关 技术 。 
目标 : 能 够 对 未 来 的 信息 技术 在 交互 界面 设计 中 的 应 用 进行 合 
平 情理 的 展望 


IEFIER 


智能 家 居 
智能 建筑 


交互 界面 设计 应 S= + SRK 
用 现状 及 趋势 |) L DPD | 人 } E 
增强 现实 


全 息 投影 









































“交互 设计 不 是 关于 界面 的 行为 怎样 ， 是 关于 人 的 行为 如 何 ， 然 后 相应 地 调整 技术 。] 
它 是 两 面 的 挑战 : 第 一 ， 你 必须 知道 你 的 目标 用 户 在 一 定 程 度 上 他 们 喜欢 什么 和 期 望 什 


Z; 第 二 ， 你 必须 搞 明白 怎样 在 给 定 的 技术 限制 下 满足 那些 需求 。” 





一 一 UXPin team 





信息 技术 是 指 用 于 管理 和 处 理 信息 所 采用 的 各 种 技术 总 称 ， 其 中 主要 包含 传 感 技术 、 计 
算 机 技术 和 通信 技术 。 互 联网 的 快速 发 展 将 信息 技术 推 向 了 另 一 个 层面 ， 正 如 张朝阳 所 言 
“互联 网 将 全 面 接管 人 们 的 生活 ”， 特 别 是 移动 互联 网 ， 正 在 颠覆 人 们 的 生活 方式 ， 将 人 类 从 传 
统 的 纸 面 信息 传递 方式 转变 为 新 媒体 微 信 、 微 博 形式 ， 同 时 也 改变 了 人 们 的 社交 、 生 活 习惯 。 
互联 网 提高 了 人 们 的 生活 质量 ， 改 变 了 人 们 的 生活 结构 ， 同 时 也 改变 了 人 们 惯 有 的 思维 方式 。" 

在 未 来 ， 信 息 技术 对 人 们 的 生活 方式 、 工 作 方 式 将 带 来 更 加 巨大 的 改变 ， 同 时 被 信 
间 包 误 的 人 们 ， 在 适应 这 些 改变 的 过 程 中 也 会 提出 更 多 需求 。 在 
以 下 儿 个 方面 来 探讨 交互 界面 设计 的 现状 及 未 来 。 












= 


目前 的 信息 技术 下 ， 我 们 从 








5.1 智能 家 居 


智能 家 居 这 一 概念 最 早起 源 于 1984 年 的 美国 ， 随 着 新 消费 时 代 的 到 来 ， 智 能 家 居 将 
成 为 未 来 人 们 生活 的 新 方式 。 现 有 苹果 的 ,HomeKit、Livinglab 生活 实验 、 海 尔 家 居 的 U— 
home、 小 米 的 智能 家 庭 等 ， 如 图 5 所 示 。 





约翰 . 安 德 可 夫 展 A 
示 未 来 的 用 户 界面 


Pis m 图 5.1 海尔 入 能 家 居 


信息 技术 发 展 将 改变 人 类 未 来 的 生活 空间 。 未 来 人 们 的 生活 方式 将 变 得 更 
美国 微软 展望 未 来 “” 绿色、 更 健康 。 据 预测 ， 到 2020 年 城市 居民 将 有 很 大 一 部 分 会 居住 到 高 智能 、 
多 2 能 家 居 。 低 碳 型 、 环 境 优美 的 高 级 住房 里 ， 智 能 家 居 、 智 能 建筑 为 人 们 提供 了 既 能 感受 
现代 建筑 带 来 的 物质 体验 ， 也 能 充分 感受 现代 科技 带 来 的 精神 层面 的 愉悦 。 随 
着 科技 的 发 展 ， 我 们 可 以 想象 未 来 可 能 生活 在 太空 中 。 

海尔 U-home 作为 物 联网 时 代 的 全 新 生活 方式 解决 方案 ,围绕 “ 随 时 随 
r 地 ， 无 处 不 在 ”的 理念 改变 了 人 们 传统 的 生活 方式 ， 畅 享 “安全 、 便 利 、 
微 信 智慧 生活 舒适、 愉悦 ”的 高 品质 生活 。 








D 信息 技术 对 未 来 人 们 生活 方式 的 影响 http: //www.taodocs.com/p-19722441.html 
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2020 年 ， 我 们 的 厨房 将 变 得 更 加 的 智能 化 ， 厨 房 与 互联 网 相连 接 ， 我 们 可 以 通过 网 络 
站 烤箱 ， 给 出 配方 和 成 分 ， 使 用 相关 的 食材 进 周 操作 (图 5.2). ° 4 








52 智能 建筑 


智能 建筑 指 通过 将 建筑 物 的 结构 、 系 统 、 服 务 和 管理 根据 用 户 的 需求 进行 最 优化 组 合 
从 而 为 用 户 提供 一 个 高 效 、 舒 适 、 便利 的 人 性 化 建筑 环境 。 Aine 方式 决定 建筑 和 空 
间 的 形式 ， 未 来 建 与 科技 的 发 展 、 人 类 w. fr 
值 取向 的 追求 ， 未 来 的 建筑 将 呈现 出 全 性 :节能 的 高 科技 特征 。 新 型 建筑 材料 的 运用 ， 满 足 
了 人 们 对 建筑 的 舒适 性 和 实用 性 方面 的 需求 ， 低 能 耗材 料 降低 了 建筑 能 耗 ， 各 种 能 源 循环 利 
用 系统 (如 雨水 收集 系统 、 水 资源 循环 利用 系统 、 垃 圾 分 类 收集 系统 、 太 阳 能 光电 系统 ) 为 
建筑 带 来 最 大 限度 的 智能 化 * 

在 巴西 里 约 举行 的 第 .31 届 奥 运 会 开幕 式 上 # 我 们 可 以 感受 到 奥 组 委 笋 费 苦 心 所 展现 的 
绿色 环保 理念 (53). 


















D http; //designreviver.com/inspiration/the-future-of-interface-design/ 
回 ” 必 应 词典 http: //www.bing.com/knows 
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全 绿 奥运 五 环 的 诞生 一 一 各 国 代表 团 的 每 位 运动 员 在 入 场 时 都 被 要 求 将 一 枚 树种 放置 在 
道具 “保温 箱 ” 中 ， 入 场 式 结 束 后 ， 他 们 播 下 的 树种 已 然 “ 生 根 发 基 ” ， 组 成 了 部 郁 蓝 苞 的 
全 绿 奥运 五 环 。 

我 们 知道 拥有 “地 球 之 肺 ”(80% 的 亚马逊 雨林 位 于 巴西 境内 ) 的 巴西 ， 自 1992 年 地 球 
高 峰会 议 于 里 约 举办 以 来 ， 在 国际 上 一 直 处 于 引领 或 响应 “节能 减 排 ”的 先锋 行列 。 但 2016 
年 里 约 奥运 会 的 直接 碳 排放 量 将 达 50 万 吨 当量 。 为 力求 让 巴西 奥运 成 为 史上 的 “ 低 碳 ” 奥 
运 会 ， 里 约 奥 组 委 相 中 了 “太阳 能 城市 塔 ”(Solar City Tower) 的 设计 项 目 ， 可 惜 由 于 场地 、 
预算 及 尚未 被 证 明 的 技术 可 行 性 问题 ， 该 计划 被 迫 终止 ， 但 我 们 能 从 这 个 项 目 中 一 罕 未 来 的 
智能 节能 化 建筑 (图 5.4). ' 

















图 5 小、 太阳能 城市 场 ”的 概念 设计 图 ,一 


Solar City Tower “k FREIRA S” RTRA RREK, ETHER, iie. 
太阳 能 所 发 的 电 除了 可 以 用 在 抽取 海水 制造 瀑布 ， 还 可 以 提供 给 市 民 使 用 。 


53 虚拟 现实 


虚拟 现实 Virtual Reality, VR) ， 是 由 美国 VPL 公司 创建 人 拉 尼 尔 (Jaron Lanier) 在 20 H: 
纪 80 年 代 初 提出 的 。 它 是 综合 利用 计算 机 图 形 系统 和 各 种 现实 及 控制 等 接口 设备 ， 在 计算 机 
上 生成 一 种 模拟 环境 、 可 交互 的 三 维 动态 实景 和 实体 行为 的 系统 。VR 技术 具有 3 个 特征 : 沉 
浸 性 (Immersion) 、 交 互 性 (Interaction) 和 想象 性 (Imagination) ， 我 们 也 将 其 简称 为 31 特征 。 
沉浸 性 ， 是 指 让 人 置身 于 计算 机 产生 的 三 维 立 体 图 像 虚拟 环境 中 ， 就 如 同 在 真实 客观 世界 中 一 
样 ， 带 给 人 身 临 其 境 的 感觉 ， 交互 性 ， 是 指 在 计算 机 生成 的 虚拟 环境 中 ， 人 们 可 以 利用 一 些 传 
感 设备 进行 交互 ， 并 可 获得 如 真实 世界 一 样 的 感官 体验 ;想象 性 ， 是 指 虚 拟 环 境 可 使 用 户 沉浸 
其 中 并 且 获 取 新 的 知识 ， 提 高 感性 和 理性 认识 ， 从 而 使 用 户 深化 概念 和 萌发 新 的 联想 。 

目前 我 们 常常 提 到 的 词 “ 智 能 穿戴 ”就 是 指 这 些 VR 设备 ， 常 见 的 有 虚拟 眼镜 、 智 能 手 
环 ， 在 游戏 、 娱 乐 、 影 视 、 健 康 领域 得 到 了 一 些 发 展 应 用 。 三 星 和 HTC 等 主流 消费 电子 厂 
商 均 纷 纷 发 布 消费 级 虚拟 现实 硬件 产品 (图 5.5 和 图 5.6) 。 据 相关 数码 商品 网 站 排行 ， 华 为 
手 环 获得 了 较 多 用 户 的 青睐 (图 5.7) 。 























D 2016 里 约 奥运 会 的 未 竟 之 愿 http: //news.solarbe.com/201608/12/101168_2.html 
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图 5.5 Oculus Rift 虚拟 头 戴 显示 器 图 5.6 暴风 麻 镜 5 代 T a L: 
| 
腕 上 私语 ,动静 随心 
华为 手 环 B3 


EDDYETTE sesos 


= < P 手机 未 来 的 形态 变化 


> 








B57 PHF 


Oculus Rift 是 一 款 为 电子 游戏 设计 的 头 戴 式 显 示 器 。 仑 将 虚拟 现实 接 入 游戏 中 ， 使 玩家 
能 够 身 临 其 境 ， 对 游戏 的 沉浸 感 大 幅 提升 。 

国产 暴风 魔 镜 5 代 的 重要 标志 就 是 电子 芯片 的 应 用 ,具备 更 高 精度 、 更 高 稳定 性 的 传 感 
器 数据 。 电 容 触 挖 操控 精细 、 适 控 器 链接 、 智 能 休眠 光 距 感应 让 交互 变 得 更 加 人 性 化 ， 操 作 
更 便捷 ， 虚 拟 现实 体验 感 乐趣 增强 。 通 过 链接 手机 自动 切换 横 屏 进入 APP, 

华为 手 环 \B3) 能 自动 判断 走路 、 跑 步 、 舍 登 、 睡 眠 四 种 状态 ， 在 配合 华为 穿戴 APP 的 情 
况 下 ， 能 轻松 记录 运动 轨迹 ， 掌 握 运动 状况 。 

以 上 这 些 可 穿戴 设备 的 交互 技术 及 手势 交互 、 脑 机 交互 、 骨 传导 交互 技术 、 体 感 
互 技术 、 脑 波 交 互 技术 、 眼 动 跟踪 交互 、 情 境 感 知 交互 、 语 音 识 别 、 多 点 触 控 交 互 等 。 其 
中 多 触 点 交互 和 手势 交互 是 应 用 最 为 普遍 的 方式 ， 电 影 汤姆 + 克 鲁 斯 在 电影 《少数 派 报 告 》 
中 很 酷 地 在 一 个 透明 的 屏幕 界面 前 操作 信息 的 场景 ， 还 有 电影 《第 六 日 》 中 ， 男 主角 阿 诺 
德 ， 施 瓦 辛 格 在 图 书馆 中 透明 玻璃 上 了 解 自己 身世 的 镜头 ， 这 样 的 操作 在 当时 是 不 可 能 的 ， 
但 如 今 已 经 应 用 在 绝 大 多 数 的 触 屏 手机 和 微软 的 Kinect 体感 设备 上 了 。 微 软 的 SideSight 是 
另 一 个 有 趣 的 项 目 ， 该 项 目 采 用 了 iPhone 的 一 步 到 位 的 多 点 触 控 。 您 可 以 使 用 它 无 须 触摸 
屏幕 进行 操作 ， 这 意味 着 一 个 更 清洁 的 屏幕 (图 5.8). 

任天堂 的 Wii-mote 可 以 说 是 实现 基于 手势 界面 的 第 一 步 ， 苹 果 公司 2013 年 获得 “3D 
手势 界面 ”专利 ， 技 术 主 要 利用 内 置 在 屏幕 中 的 电容 性 触摸 感应 器 和 距离 感应 器 来 检测 手指 
的 位 置 ， 在 该 技术 的 支持 下 ， 用 户 可 以 从 2D 图 像 中 将 3D 物体 图 形 “ 拉 出 ”来 。 微 软 也 正 
在 研发 一 种 用 于 汽车 挡 风 玻璃 上 的 HUD's 设备 ， 可 以 在 玻璃 上 显示 气温 、 电 子 邮件 等 信息 。 

手势 交互 是 自然 用 户 界面 的 重要 部 分 (图 5.9) ， 自 然 用 户 界面 是 我 们 当前 所 面临 的 演 








T É 








































































SN 
[ / 


sa 一 


图 5.9 基于 手势 的 所 





变 。 当 今 已 在 较 小 的 程度 上 被 使 用 。 自 然 
ze. -_ e= 用 户 界面 更 专注 于 做 ， 用 户 与 设备 或 平台 
进行 交互 ， 以 达到 肯 标 、 理 想 化 地 部 
际 互动 和 从 中 得 到 的 成 就 。 交 互 中 可 以 感 
觉 到 流 物 直接 和 根本 。 现 有 的 例子 是 ， 
在 菜 些 网 站 ， 用 户 可 以 通过 画廊 请 块 导 航 
进行 刷卡 (以 平板 电脑 为 例 ) ， 如 图 5.10 
ë Pen 所 示 。 

空间 动作 交互 技术 在 娱乐 游戏 上 运用 得 

较 多 ， 这 种 技术 能 识别 三 维 空间 中 的 运 动 并 

将 其 转换 成 对 应 的 信号 输入 设备 。 任 天 堂 

和 ， 与 其 类 似 的 还 有 索尼 推出 的 ,PlayStation 动作 遥控 器 支持 空间 动作 交互 
5 制 器 顶部 的 移动 距离 和 转动 轨迹， 微软 Xbox 项 目 Natal 让 用 户 自己 的 





























司 的 Wii 的 动作 遥控 
技术 ， emaa 
身体 成 为 遥控 
目前 的 
互 。 支 持 
是 可 以 让 你 的 生体 跟 虚拟 世界 中 的 各 种 场景 互动 。 在 体感 交 技 术 中 又 可 以 细 分 出 各 种 类 别 
及 产品 ， 如 体感 座 椅 、 跑 步 机 、 体 感 衣 服 、 空 间 定位 技术 、 动 作 捕捉 技术 等 。 目 前 VR 常见 
的 动作 捕捉 及 空间 定位 技术 有 : 激光 定位 技术 、 红 外 光学 定位 技术 、 可 见 光 定位 技术 、 计 算 
机 视觉 动作 捕捉 技术 、 基 于 惯性 传感器 的 动作 捕捉 技术 。” 
O 围 较 广 ， 涉 及 医疗 、 教 育 、 文 物 保护 、 展 示 、 
学 上 ， 我 们 | 通过 虚拟 现实 技术 进行 虚拟 的 外 科 手 术 ， E; 
aaa 


kr 
m 回 E m 本 中 抽象 的 数学 知识 ， 提 升 教 


至 和 趣味 性 ， 在 文物 保护 





RAN VR 头 显 设备 ， P 有 1 HTC Vive. Oculus Rift, PS VR, Hs Meeme 


























影视 等 领域 。 Cs 















F 回 上 ， 通 过 建立 文物 的 三 维 模型 ， 

$ CENAR 。 硅谷 VR 大 神 打造 rnm. EN 盘点 最 好 的 8 款 虚 ”实现 濒危 文物 高 精度 永久 保存 
元 年 》 虚拟 现实 领域 的 下 破碎 》 鼻 部 虚拟 现 HREL., ME = CNS = 
一 个 ER 实体 验 人 类 生活 在 展示 上 ， 利 用 虚拟 技术 生动 


D VR 上 常见 的 五 大 动作 捕捉 及 空间 定位 技术 对 比 http: //www.edn-cn.com/news/article/201606201909 
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逼真 地 展现 文物 ;在 影视 上 ， 电 影 能 够 为 观众 呈现 出 全 景 体验 ， 观 众 可 自由 选择 自己 感 兴趣 
的 观 影 角度 和 内 容 ， 观 众 对 电影 情节 具有 控制 力 ， 根 据 自 己 的 选择 进入 特定 的 故事 情 
中 ， 在 建筑 行业 ， 还 有 虚拟 模拟 样板 间 、 沙 盘 等 。 











5.4 “增强 现实 


增强 现实 (Augmented Reality，AR) 技术 在 1990 年 被 提出 ， 是 虚拟 现实 技术 的 一 个 重 
要 分 支 ， 是 一 种 实时 地 计算 摄影 机 影像 的 位 置 及 角度 并 加 上 相应 图 像 的 技术 。 增 强 现 实 技术 
的 目标 是 在 屏幕 上 把 虚拟 世界 套 在 现实 世界 并 进行 互动 ， 利 用 虚拟 的 图 形 和 文字 对 真 
实 世界 的 场景 进行 增强 ， 实 现 真实 世界 和 虚拟 世界 的 无 颖 融合 ， 并 能 够 使 用 户 如 在 真实 环境 
中 一 样 自然 实时 地 交互 。 在 用 户 眼 中 ， 真 实物 体 和 虚拟 模型 是 共存 的 。*。 这 种 技术 具体 包 
括 3D 物体 的 注册 技术 、 显 示 技 术 、 跟 踪 和 定位 技术 、 虚 实 融 合 技 术 < 用户 交互 技术 等 。 增 
强 现实 是 结合 计算 机 图 形 学 、 、 机 器 视觉 等 诸多 学 科 的 技术 。 同 时 也 依赖 于 显示 设 
备 、 图 形 加 速 设备 、 传 感 器 、 交互 工具 等 硬件 设备 的 发 展 。 目 前 ， 国 内 增强 现实 技 
术 还 处 在 初级 阶段 ， 仅 在 医疗 、 军 事 、 工 业 、 教 育 < 娱乐 、 文化 等 领域 得 以 应 用 。 随 着 随身 
电子 产品 运算 能 力 的 提升 ， 预 期 增强 现实 的 用 途 将 会 越 来 越 广 ， 如 图 5.11 和 图 5.12 所 示 。 




















图 5.11 YERRI 图 5.12 ”谷歌 眼镜 的 构成 


谷歌 眼镜 \(Google Glass) 项 目 由 谷歌 提出 ， 用 于 开发 增强 现实 的 头 戴 式 显 示 器 (Head- 
mounted display, HMD) 。 和 谷歌 眼镜 的 预期 目的 ， 是 希望 用 眼镜 取代 智能 手机 的 屏幕 ， 并 且 
允许 使 用 自然 语言 来 与 互联 网 交互 。 谷 歌 眼镜 并 不 单纯 地 定位 为 增强 现实 产品 ， 更 准确 地 说 
应 该 为 兼容 增强 现实 功能 的 字 戴 式 计算 设备 。™ 

谷歌 眼镜 主要 由 电池 、CPU、 相 机 、 扬 声 器 、 豆 克 风 、 微 型 投影 仪 和 棱镜 组 成 。 其 中 微 
型 投影 仪 和 棱镜 又 是 实现 主要 功能 的 关键 。 

有 人 说 增强 现实 才 是 未 来 的 发 展 趋势 ， 因 为 它 能 够 带 给 人 们 更 多 的 互动 体验 ， 非 虚拟 现 
实 引 导 用 户 进 入 虚拟 梦幻 的 世界 ， 切 断 了 人 与 人 之 间 的 互动 交流 ， 而 增强 现实 可 以 使 用 户 看 
到 虚拟 世界 的 同时 也 能 看 到 现实 世界 的 物体 ， 从 而 保持 人 与 现实 世界 、 人 与 人 之 间 的 互动 交 
流 ， 补 充 人 们 对 现实 世界 的 理解 。 增 强 现实 最 大 的 魅力 在 于 让 你 看 到 别人 看 不 到 的 东西 ， 让 
你 的 生活 更 有 意思 ， 让 工作 更 智能 。 





中 ”增强 现实 系统 的 四 项 关键 技术 http: //ishare.iask.sina.com.cn/f/38089741.html 
加 ”腾讯 数 媒 : 虚拟 和 现实 融合 的 魅力 http: //digi.tech.qq.com/zt2013/ar/index.htm 
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未 来 ， 增 强 现实 将 主要 用 于 展示 、 图 书 、 娱 乐 游戏 、 车 载 系 统 、 医 学 等 领域 。 在 展示 上 ， 
通过 增强 现实 技术 ， 将 虚拟 和 现实 的 场景 带 给 观众 ， 让 观众 具有 更 真实 的 体验 (图 5.13) ; 在 图 
书 上 ， 结 合 增强 现实 场景 、 三 维 模型 等 与 现实 世界 创建 的 儿童 读物 为 孩子 们 带 来 身 临 其 境 般 的 
沉浸 式 体验 (图 5.14) ， 在 娱乐 游戏 上 ， 虚 拟 场景 提升 游戏 体验 感 ， 增 强 玩家 与 虚拟 角色 的 互 
动 性 (图 5.15) ; 在 车 载 系 统 上 ， 增 强 现实 技术 主要 用 于 车 载 导 航 系统 ， 当 驾驶 员 在 驾驶 汽 
车 时 ， 汽 车 周围 环境 的 图 像 寺 生 动 地 显示 在 汽车 仪表 盘 上 的 触摸 屏 上 ， 驾 驶 员 可 以 
从 屏幕 上 了 解 行驶 方向 、 街 道 名 称 等 各 种 信息 (图 5.16); 在 医学 上 ， 可 虚拟 人 体 结构 ， 用 
于 学 习 医疗 解剖 ， 利 用 增强 现实 技术 合成 图 像 的 手术 技术 操作 ， 增 强 现实 在 娱乐 游戏 、 社 交 
上 将 会 有 更 加 超 乎 想象 的 应 用 空间 。 










































现实 在 图 蔬 上 的 应 用 | 





荷兰 首部 的 考古 学 博物 馆 Allard Pierson Museum， 将 iMac 作为 窗口 的 增强 现实 系统 
MovableScreen， 用 来 展示 古 罗 马 的 遗迹 。 


D http; //www.engadget.com/tag/MovableScreen/ 


@ http; /www.dnp-digi.com/solution/product/experience/04-3.shtml 
® http; /www.jp.playstation.com/scej/title/eoj/ 


D 《科学 世界 》2013 年 第 2 期。 


由 日 本 某 印 刷 公司 开发 的 结合 AR 电子 书 ， 摄 像 头 读 取 书 上 的 标志 图 片 后 ， 在 显示 器 中 
显示 相应 的 3D 动画 。 

采用 增强 现实 技术 的 车 辆 导航 系统 “虚拟 导航 ”(Cyber Navi) ， 它 上 面 搭载 了 被 称 为 
见 显示 器 ”(AR HUD，AR Head-Up Display) 的 显示 装置 。 增 强 现 实 平视 显示 
内 够 把 导航 信息 登 加 显示 在 前 挡 风 玻璃 上 面 ， 实 时 的 导航 线路 、 篆 头 指 示 竺 信息， 这些 
息 看 上 去 就 像 是 浮现 在 车 前 的 道路 景象 上 。 








5.5 全 息 投 影 


全 息 投 影 又 称 虚拟 成 像 技 术 ， 是 利用 干涉 和 衍射 原理 记录 并 再 现 物体 真实 的 图 像 的 
技术 。 实 际 上 ， 全 息 投 影 又 可 以 看 成 是 “ 扩 增 的 一 个 典型 案例 因为 全 息 投影 就 是 将 
虚拟 的 信息 和 数据 篆 加 在 现实 环境 中 营造 出 的 视觉 效果 ， 不 同 的 地 方 在 于 全 息 投 影 目 前 在 交 
互 幻觉 上 稍微 欠缺 ， 不 过 现在 也 已 有 了 很 多 关于 全 息 投影 交互 的 设想 ， 比 如 前 面 质 ee 
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眼镜 ， 很 多 业内 人 士 猜测 未 来 谷歌 可 能 会 给 谷歌 眼镜 项 目 加 入 全 息 投影 技术 ， 将 很 要 的 
用 户 界 面 投影 至 实物 上 ， 如 将 键盘 投射 在 手 上 , 方便 用 户 直 接 利用 全 息 投 影 来 es sa 


互 ， 这 也 是 未 来 界面 的 一 种 形态 (图 5.17). ' 





谷歌 创始 人 展示 谷 | 谷歌 眼镜 发 布 现 场 谷歌 眼镜 项 目 演示 革新 发 明 : 马 特 - 米 微软 增强 现实 投影 。 微软 增强 现实 眼镜 
歌 眼镜 视频 实录 尔 斯 : 可 引发 增强 仪 ， 让 整个 房间 变 Microsoft HoloLens 
现实 的 图 像 识别 成 触摸 屏 宣传 片 





爹 目 投影 可 以 让 用 户 不 借助 任何 设备 ， 看 到 有 逼真 的 虚拟 图 像 ， 甚 至 可 以 进行 操作 。 微 软 
的 全 息 眼 镜 (Microsoft HoloLens) 虽然 仍 是 一 种 头 戴 型 显示 设备 ， 配 备 了 专门 的 全 息 处 理 器 
(Holographic Processing Unit/HPU) ， 并 有 多 个 传感器 ， 能 通过 半 透 明 的 镜片 让 用 户 看 到 数字 




















了 虚拟 和 现实 融合 的 魅力 http; //digi.tech.qq.com/zt2013/ar/index.htm?ptlang=2052 
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内 容 投 射 成 的 全 息 图 像 场景 ， 还 可 以 与 现实 世界 互动 (图 5.18) 。 
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最 真实 的 虚拟 -全 微软 全 息 投影 设备 S 全 息 投影 的 时 装 JelsonSun- 周杰伦 自制 全 息 投影 
息 投影 简介 HoloLens 秀 超时 代 演 唱 会 开场 
全 息 投影 


在 我 们 之 前 看 到 的 科幻 电影 中 不 乏 全 息 投 影 的 概念 沁 它 的 终极 形式 是 完全 不 需 佩戴 任何 
设备 ， 通 过 裸眼 观看 虚拟 效果 。” 全 息 投影 技术 在 未 来 的 虚拟 购物 、 旅 行 、 教 育 、 游 戏 、 医 疗 
等 领域 拥有 比 虚拟 现实 更 好 的 使 用 体验 。 

在 科技 迅猛 发 展 一 新 技术 不 断 被 发 明 创造 的 当下 ， 伴 随 人 们 日 益 增长 的 物质 文化 和 精神 
需求 ， 对 未 来 的 生活 、 工 作 、 学 习 产生 了 无 限 的 可 能 及 幻想 。 展 望 未 来 ， 我 们 将 面临 怎样 的 
世界 ， 人 机 交互 、 界 面 形态 将 会 是 一 个 非常 富有 想象 力 和 创造 力 的 话题 。 








课 后 练习 


通过 本 章 的 学 习 及 二 维 码 链接 的 扩展 内 容 ， 谈 谈 你 感 兴趣 的 关于 交互 设计 技术 ， 并 对 未 
来 交互 界面 设计 发 展 趋势 进行 展望 。 
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教 字 要 求 和 目标 
= Wl CERTINA 将 理论 知识 应 用 到 设计 中 ， 做 到 理 


在 掌握 理 论 知识 的 基础 上 ， 通 过 课题 训练 ， 提 高 动 
分 析 和 解决 问题 的 能 力 。 


NY 教学 框架 
网 页 设计 


交互 界面 原型 设计 课题 | 移动 端 设 计 


游戏 设计 
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前 面 章节 我 们 从 什么 是 交互 设计 、 如 何 理解 以 用 户 为 中 心 的 设计 ， 再 具体 到 界面 中 的 信 
息 视觉 方面 的 设计 及 未 来 交互 设计 趋势 的 展望 上 ， 由 浅 入 深 、 由 宏观 到 微观 地 向 大 家 介绍 了 
交互 界面 设计 的 基础 理论 知识 。 本 章 我 们 就 实际 的 案例 进行 展开 讲解 。 为 了 让 学 习 者 从 实践 
的 层面 理解 交互 界面 设计 ， 作 者 将 教学 过 程 中 指导 本 科 二 、 三 年 级 学 生 的 课题 引入 本 章 ， 而 
没有 直接 引用 市 场 上 的 设计 案例 ， 这 是 为 了 更 真实 地 展现 课程 教学 中 学 生 的 实际 掌握 情况 。 
本 章 就 网 页 设计 、 移 动 端 设计 和 游戏 设计 三 方面 对 课题 设计 学 生 作品 进行 展示 。 
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网 站 是 我 们 接触 最 多 的 一 种 新 媒介 形态 ， 网 页 设计 也 是 最 具 发 挥 空间 的 一 种 交互 界面 设 
计 ， 在 教学 过 程 中 ， 一 般 把 网 页 设计 概括 为 两 个 部 分 ， 一 个 是 指定 主题 的 网 页 ， 另 一 个 是 由 
学生 自 由 发 挥 的 网 页 。 从 教学 效果 来 看 ， 学 生 往往 更 专注 于 个 人 网 页 的 设计 。 对 于 设计 专业 
的 学 生来 说 可 能 更 热衷 于 展现 其 个 性 化 的 一 面 。 AN 


6.1.1 课题 设计 一 : 设计 一 个 个 人 首页 。 一 
个 人 首页 的 内 容 可 以 是 自己 的 作品 展示 ， 选 摊 与 自己 兴趣 爱好 相关 的 内 容 ， 也 可 以 为 他 
人 设计 一 个 个 人 主题 性 站 点 ， 如 图 6.1 RN 
K 
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图 6.1 个 人 首页 设计 / 学 生 杨 琪 作品 


点 评 : 这 是 一 位 初次 学 习 网 页 版 式 设计 课程 的 学 生 做 的 作品 。 整 体 色调 淡雅 ， 页 面 布 局 
结构 清晰 ， 分 为 四 个 模块 ， 依 次 是 照片 合辑 、 兴 超 爱 好 、 我 的 简介 、 与 我 联系 ， 分 别 选 取 生 
活 中 的 素材 对 各 个 模块 加 以 充实 ， 布 局 紧凑 ， 元 素 之 间 内 在 关联 性 较 好 。 作 为 个 人 主页 ， 在 
布局 上 还 可 以 拥有 更 大 的 张力 、 突 显 个 性 ， 可 采用 一 些 网 页 特效 手法 增加 交互 性 ， 以 此 提升 
网 页 的 趣味 性 、 互 动 性 。 

6.1.2 ”课题 设计 二 : 扁平 化 网 页 设计 

扁平 化 风格 越 来 越 受 到 欢迎 ， 越 
来 越 多 的 网 页 设计 走向 了 扁平 化 风格 。 
这 个 课题 是 让 学 生 做 一 个 扁平 化 风格 
的 站 点 ， 选 题 不 限 。 

图 6.2 是 一 个 买卖 二 手 物品 的 网 
站 。 网 站 信息 量 比较 大 ， 展 示 的 内 容 
较 丰 富 ， 选 择 蓝 灰 和 中 灰色 这 种 较 沉 
稳 又 不 失 活 泼 的 色彩 作为 背景 ,便于 
更 好 地 凸显 二 手 物品 丰富 的 色彩 。 排 
版 设计 上 ， 为 了 满足 顾客 直观 找到 所 
需 物品 这 一 功能 需求 ， 主 页 面 设计 
简洁 直观 ， 只 在 视觉 中 心 位 置 留 下 了 
重要 信息 。 图 标 设计 上 ， 使 用 矩形 : 
圆 形 等 形状 组 合成 我 们 日 常 的 生活 
用 品 图 标 (如 鞋子 和 鞋 盒 : 本 子 和 胡 
服 等 ) ， 达 到 直观 、 简 清 的 效果 。 字 
体 设计 更 具 趣 味 性 > 为 网 页 增添 了 
特色 。 

点 评 :“ 访 伪 平 化 页 面 中 值得 肯定 
的 是 从 用 户 需 求 和 操作 流程 出 发 ， 尽 
量 做 到 了 简洁、 明了 ， 人 小 图 标的 设计 
贴切 主题 ， 图 标 细 节 的 处 理 手法 能 反 
映 作者 注意 细节 的 设计 态度 。 不 足 之 
处 是 整体 色调 的 明度 、 饱 和 度 可 适当 
提高 ， 鲜 明 的 色彩 能 够 刺激 消费 者 的 
购物 行为 。 

图 63 是 一 个 以 饮品 制作 流程 为 
主题 的 网 页 ， 页 面 采用 扁平 化 风格 和 
滚动 视差 的 视觉 体验 效果 ， 咖 啡 豆 页 
面 通过 鼠标 潜 轴 移动 自 上 而 下 展示 了 
从 一 粒 咖啡 豆 一 研磨 成 粉末 状 一 称 一 定 的 量 一 加 入 开水 一 饮品 制 成 的 过 程 。 设 计 过 程 为 : 先 设 
计 网 页 的 结构 、 页 面 整体 风格 及 布局 ， 再 进行 相关 素材 的 搜集 和 元 件 的 制作 ， 提 取 具 有 代表 性 
的 生活 用 品 ， 绘 制 成 扁平 化 风格 ， 接 着 丰富 每 个 页 面 的 场景 。 

















图 6.2 “二 货 ” 页 面 设计 / 学 生 黄 导 蛤 作品 
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图 6.3 饮品 页 面 设计 / 学 生 叶 月 作品 


点 评 : 视差 滚动 网 页 本 身 带 有 较 好 的 互动 趣味 性 特点 ， 再 加 上 生动 的 内 容 ， 能 给 用 户 带 
来 更 强 的 体验 感 。 场 景 设 计 以 厨房 为 背景 ， 扁 平 化 风格 的 厨具 增添 了 卡通 趣味 ， 以 这 种 形式 
为 蓝本 ， 还 能 设计 出 系列 饮品 的 制作 过 程 ， 不 失 为 一 种 有 趣 的 设计 方案 。 如 能 够 将 场景 元 素 
设计 得 更 细致 ， 页 面 中 的 交互 效果 更 丰富 ， 整 体 效 果 将 会 更 完美 。 





图 6.4 是 一 个 扁平 化 个 人 页 面 设 计 ， 页 面 以 俯视 的 视角 为 我 们 展现 了 电脑 、 数 位 板 、 画 
笔 等 元 素 ， 表 达 了 这 是 一 个 设计 师 个 人 主页 。 





图 6.4 扁平 化 个 人 页 面 设计 / 学 生 | 
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素 进行 了 相应 功能 按钮 的 设计 ， 与 
tt 趣味 性 。 
草率 了 ， 导 航 英文 需要 注意 大 小 写 ， 这 种 小 


点 评 : a ne oo 
我 、 温 韦 之 感 ， 同 时 作者 还 别有用心 地 将 手机 、 
上 排 导 航 相 对 应 ， 这 种 导航 形式 丰富 了 导航 
左上 角 大 大 的 “ME” 作 为 网 页 主题 ， unas, 
问题 应 该 尽量 避免 。 y SÑ 
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pd 


我 们 可 以 一 . emsa sheni 我 们 的 生活 越 来 越 离 不 开 手 机 
Ta sami annassa? 用 软件 ， 引 导 学 生 做 这 个 课题 ， 意 在 从 
EEUE Tip FAF, 训练 其 发 现 问题 了 分析 问题 、 解决 问题 的 能 力 。 
6.2.1 课题 一 : 花草 集 APP 

之 所 以 选择 这 个 课题 ， 是 发 现 身 边 养 绿 植 的 人 越 来 越 多 ， 绿 植 能 够 为 居家 空间 、 办 公 空 
间 、 宿 舍 增 添 一 抹 绿色 ， 在 一 定 程度 上 起 到 净化 空气 的 作用 ,但 是 很 多 人 因 缺 乏 植 物 养护 
知识 、 经 验 ， 导 致 植物 经 常 是 莫名 其 妙 就 死 了 ， 然 后 再 买 一 盆 新 的 …… 这 样 往复 形成 恶性 循 
环 。 针 对 以 上 情况 ， 设 计 项 目 小 组 成 员 对 种 植 绿 植 用 户 行为 进行 分 析 ， 最 终 围绕 “初级 种 植 
绿 植 用 户 养护 知识 ， 病 变 解决 方法 ”进行 APP 设计 。 

1. 调研 过 程 

调研 部 分 包含 环境 、 用 户 、 竞 品 这 三 个 方面 的 内 容 ， 该 调研 数据 一 部 分 来 源 于 《长 沙城 
市 居民 花卉 消费 现状 调查 研究 》(2014.05) 一 文中 的 统计 数据 ， 另 一 部 分 是 小 组 成 员 问 卷 调 
研 所 得 。 

以 问卷 调查 的 方式 对 长 沙 花卉 市 场 消费 者 的 年 龄 段 、 职 业 、 对 植物 种 类 的 偏好 以 及 他 们 
用 于 购买 花卉 的 预算 进行 调查 ， 在 长 沙 花卉 市 场 中 随机 发 放 调 查 问 卷 ， 让 消费 者 回答 相关 的 
问题 ， 完 成 问卷 调查 (图 6.5) 。 


62 移动 端 设计 — a7 































=l 


r: 


£ 


[St 








wany 


ET 








taa 
wawa — wa rn 
a mA 





2 mena 
nesese Nee 


图 6.5 花草 集 APP 调研 部 分 / 学 生 陈 思 思 、 陈 玮 婷 作 品 


调研 主要 以 访谈 为 主 ， 通 过 访谈 法 得 到 以 下 几 个 方面 的 问题 。 

(1) 用 户 通 常 不 能 将 植物 养 得 长 久 。 

(2) 用 户 通 常 都 不 太 了 解 关于 种 植 的 知识 ， 包 括 品种 、 植 物 的 特性 等 。 

(3) 不 知道 自己 的 问题 所 在 。 

(4) 工作 或 学 业 任务 繁忙 而 忘记 浇 水 、 照 顾 植物 。 

(5) 没有 时 间 了 解 关于 种 植 的 知识 。 

访谈 对 象 所 希望 的 功能 :，@ 实 时 提醒 浇 水 、 施 肥 、 光 照 ，@ 推 荐 适合 用 户 养 的 植物 ，@ 将 
养 植 物 所 需 的 东西 列 出 ， 送 货 上 门 。 

调研 结论 : 居民 花卉 消费 的 主要 人 群 类 型 为 中 青年 ， 该 消费 群体 具有 以 下 特征 : 文化 程 
度 较 高 ， 职 业 分 布 广泛 ， 月 收入 在 2000 元 以 上 ， 具 备 较 好 的 审美 情趣 ， 以 女性 为 主 ， 具 有 
现代 的 消费 观念 ， 平时 没有 太 多 的 时 间 打 理 ， e I A 





针对 调研 结论 ， 小 组 做 了 以 下 故事 版 (图 6.6) 。 P 
设想 了 三 种 解决 方案 (图 6.7) 。 NN 
将 角色 模型 代入 不 同 的 情境 中 ， 设 计 三 SM 6.8) 


NS 


月 ,有 时 又 很 亲 ,在 忙 的 时 候 总 
关 ， 在 两 个 月 双 半 年 左 石 ， 目 而 地 





6.6 花草 集 APP 故事 版 一 问题 描述 / 学 生 陈 思 思 、 陈 玮 婷 作品 
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图 6.8 花草 集 APP 故事 版 一 三 种 解决 方案 / 学 生 陈 思 思 、 陈 玮 婷 作品 
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以 解决 问题 为 出 发 点 ， 设 计 了 一 款 针对 中 青年 〈 包 括 城市 白领 、 大 学 生 等 ) 的 养护 型 
APP “JEME APP”, 

2. 功能 、 交 互 框架 

该 APP 的 功能 框架 和 交互 框架 如 图 6.9 和 图 6.10 所 示 。 
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图 6.9 花草 集 APP 功能 框架 / 学 生 陈 思 思 、 陈 玮 婷 作品 


3. 原型 图 

在 功能 需求 和 交互 框架 的 基础 上 ， 制 作 低 保 真 原型 图 (图 6.11) 和 高 保 真 原型 图 (图 6.12) 。 

点 评 : 从 用 户 需求 出 发 ， 经 过 调查 研究 梳理 出 问题 ， 设 想 方 案 ， 设 定 人 物 角色 模型 代入 
故事 版 情境 中 ， 设 计 该 应 用 的 功能 框架 和 交互 框架 。 设 计 流程 较 规范 ， 基 本 满足 了 用 户 在 功 
能 上 的 需求 。 信 息 架 构 远 辑 合理 ， 交 互 流程 设计 流畅 。 绿 色 主 色 调 符合 主题 内 容 ， 每 个 页 面 
布局 均 以 标准 布局 尺寸 为 参照 ， 该 APP 既 提 供 植物 养护 知识 ， 又 提供 互动 交流 功能 ， 其 中 
提醒 浇 水 、 求 助 交流 功能 是 该 设计 的 亮点 ， 后 期 规划 将 会 有 推荐 购买 、 送 贷 上 门 等 一 条 龙 的 
服务 ， 同 时 增加 了 其 商业 模式 。 
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图 6.12 ERR APP 高 保 真 原型 图 / FERED EBEE 


6.2.2 课题 二 :“ 二 货 ”APP 


1. 项 目 背 景 N 

随 着 时 代 的 进步 ， 大 学 生 的 消费 观念 和 消费 心理 也 在 不断 地 发 生 着 改变 ， 绝 大 多 数 
在 校 大 学 生 都 有 过 从 他 人 竹 里 购买 或 向 他 人 出 售 二 手 物 蝇 的 经 历 ， 涉 及 的 商品 包括 图 书 、 
二 手数 码 产品 等 物品 基本 每 所 学 校 校园 内 都 有 交易 二 手 商品 的 平台 和 场地 。 但 由 于 时 
间 和 场地 等 因素 ， 信 息 交 流 不 畅通 ， 使 校园 内 部 资源 不 能 得 到 有 效 利 用 ， 为 此 专门 针对 
众多 大 学 聚集 地 < 如 大 学 城 等 ) 设计 了 一 款 供 大 学 生 进 行 二 手 物品 买卖 交易 的 平台 ， 设 计 
流程 如 图 JSIR 


图 6.13 “二 货 ”APP 设计 流程 


2. 前 期 调研 

采用 问卷 调研 、 焦 点 小 组 、 网 络 调研 的 形式 对 学 生 闲置 物品 进行 调研 分 析 ， 获 取 相 关 数 
Ba; 哪些 二 手 物 品 受 欢 迎 、 二 手 物 品 交易 方式 、 二 手 物品 价位 接受 度 、 闲 置物 品 主要 处 理 方 
式 ， 发 现 大 学 生 对 于 二 手 物 品 交易 的 需求 心理 ， 概 括 起 来 不 外 平 “ 求 实 ”“ 求 廉 ”“ 求 新 ”的 
消费 心理 (图 6.14) 。 

对 “ 闲 鱼 ”“ 小 交易 *”“ 空 空 狐 ” 这 些 同类 产品 ， 从 功能 模块 、 用 户 群 体 、 界 面 视觉 、 色 
彩 对 比 、 商 品 发 布 、 购 买 流程 方面 做 分 析 (图 6.15). 

3. 需求 分 析 

设计 角色 模型 (图 6.16) 和 绘制 故事 版 (图 6.17 和 图 6.18) 进一步 明确 用 户 需 求 。 
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图 6.16 “二 货 ” 角 色 模型 / FENA. R3. 图 6.17 “二 货 ”APP 角色 设 定 / 学 生 叶 丹 、 赵 蒙 、 黄 煜 蛤 、 葵 佳宾 作品 
RRA. RERED 
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某 天 丸子 看 到 ”二 货 “ 线 下 活动 开展 " 


并 且 他 们 三 个 成 了 好 朋友 





图 6.18 “二 货 ”APP 故事 版 需求 分 析 / FEHA. RR. E. RERET 





4. 原型 

进入 页 面具 有 功能 宣传 的 作用 ， 一 般 采 用 图 形 加 简洁 的 文字 的 形式 ， 对 主要 的 特色 功能 
进行 介绍 (图 6.19) 。 

高 保 真 原型 图 ， 也 是 近似 最 终 效果 图 阶段 (图 6.20) 。 



































图 6.19 “二 货 ”APP 进入 界面 设计 / FEIR RRNA. RERFED 


» œ ° 
图 6.20 “ZE” APP 界面 设计 / PEHA., KR. RE, RER 





点 评 : 该 项 目 针 对 大 学 生 如 何 处 置 不 用 物品 的 问题 进行 探讨 ， 设 计 了 这 一 款 在 线 交 易 二 
手 物 品 的 平台 。 其 创意 、 出 发 点 很 好 ,解决 了 大 学 生 闲 置物 品 处 理 的 困 总 ， 也 提倡 物品 循环 
利用 的 环保 意识 , “二 贷 ” 名 称 既 贴 合 主题 又 具 趣 味 性 。 视 觉 上 ， 形式 感 很 强 , 设计 精致 ; 
功能 上 ， 能够 满足 二 手 买 卖 用 户 的 需求 。 不 足 之 处 是 实现 形式 上 需要 再 革 酌 。 针 对 校园 服务 
平台 使 用 APP 的 形式 需要 考虑 受众 人 群 和 功能 需求 ， 有 些 应 用 适合 使 用 APP 的 方式 实现 ， 
有 些 则 可 以 使 用 更 便捷 、 更 轻 量 级 的 方式 呈现 。 如 果 是 受众 人 群 较 少 、 功 能 不 复杂 的 服务 平 
台 ， 建 议 采用 如 微 信 订阅 号 、 网 站 的 形式 。 微 信 订 阅 号 使 用 范围 、 传 播 速度 绝 不 亚 于 APP, 
甚至 在 某 些 方面 优越 于 APP， 而 且 还 具有 开发 技术 门槛 比 APP 低 及 便于 推广 传播 的 优势 。 


6.2.3 ”课题 三 : “跑腿 猿 ” 


APP 


大 学 生活 丰富 多 彩 ， 但 大 学 生活 也 有 许多 “无 奈 ”， 针 对 大 学 生活 中 需要 别人 帮忙 却 又 


难以 启齿 的 地 方 : 零食 或 日 用 





唱 没 了 ， 此 时 你 又 不 想 出 去 买 的 时 候 ;， 节假日 想 出 去 玩 ， 又 不 


想 出 去 排队 买 车 票 时 ， 当 你 在 上 课 或 开会 时 ， 有 快递 需要 签收 或 领取 时 ， 下 课 太 晚 时 ， 食 堂 





已 人 满 为 患 但 又 不 想 下 楼 取 儿 
助 你 解决 这 些 不 便 (图 6.21) 。 


卖 时 。 一 款 可 以 为 你 提供 跑腿 服务 的 手机 APP 平台 ， 可 以 帮 


跑腿 猿 APP 





图 6.21 “BR” APP 设计 框架 / FERR. RIL ARAFE 
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点 评 : 不 可 否认 ， 学 生 的 创意 点 子 都 很 贴近 生活 ， 对 实际 生活 也 富有 现实 意义 ， 此 “ 跑 
KEIR” APP 设计 从 设计 过 程 来 看 已 经 做 得 比较 完整 细致 了 。 可 以 说 ， 这 是 一 款 提 供 各 种 服务 
与 帮助 的 平台 ， 对 象 是 在 校 大 学 生 。 由 于 这 是 一 个 可 以 直接 产生 交易 的 平台 ， 所 以 就 会 有 安 
全 、 信 息 泄 露 问题 存在 ， 该 组 同学 对 其 做 了 关于 实名 认证 、 诚 信 值 、 评 价 评分 等 方面 的 改进 
设计 ， 鉴 于 是 在 校园 发 生 的 一 种 互 帮 互 助 的 活动 ， 可 以 使 用 积分 的 方式 ， 这 样 避免 了 资金 交 
易 上 的 麻烦 ， 又 起 到 了 真正 服务 同学 的 宗旨 。 从 产品 设计 角度 来 说 ， 这 是 一 款 很 棒 的 APP, 
因为 任务 不 同 ， 该 APP 的 细 分 人 群 会 是 抱 有 各 种 “目的 ”的 人 : ÉRD, RA, FIF, 
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游戏 钦 件 除了 其 休闲 娱乐 功用 外 ， 也 是 一 种 富 教 于 乐 的 媒介 半生 天 堂 早 年 出 品 的 “ 解 
说 ! DS 料理 指导 ”可 用 触 控 笔 点 画 荧屏 ， 通 过 说 话 发 声 来 玩 游戏 。 游 戏 中 介绍 美味 健康 料 
理 的 食材 、 做 法 ， 并 通过 影片 解 阅 让 使 用 者 学 习 料 理 的 步 曼 3 大 们 可 以 通过 英 幕 点 选读 音 
ee CD ee ee 
特别 是 不 玩 游戏 的 人 也 纷纷 参与 。 那 么 我 们 如 果 应 用 交 ; 段 设 计 让 大 家 喜爱 的 游戏 呢 ? 
6.3.1 课题 一 : “an wisdom” 游 戏 ~ >< N 

这 款 游戏 针对 12 岁 以 下 的 儿童 设计 游戏 背景 是 在 家 园 和 谐 生 活 的 动物 部 沙 ， 被 非法 
狂人 侵犯 ， 众 多 动物 头 闪 灭绝 ， 玩 家 帘 要 条 生 合 理 的 动物 特性 在 有 限 的 时 间 内 通过 关卡 ， 打 
败 BOSS， 为 动物 们 夺回 家 园 。 每 个 关 下 均 有 一 个 动物 作为 直角， 每 一 个 游戏 场景 代表 一 个 
动物 主题 ， 动 物 跑 践 、 性 情 2 习惯 等 特性 设计 在 游戏 情节 咎 汉 每 一 个 通关 使 儿童 在 游戏 中 潜 
移 默 化 地 学 习 并 掌握 了 动物 知识 〈 图 622) 。 希 望 通过 游戏 ， 让 更 多 的 孩子 关心 动物 ， 关 妥 
自然 。 二 二 证 N 

点 评 : RRAS AIREA EAA l UE U. 所 以 整个 场景 设计 色彩 鲜明 ,证 
通 味 浓郁 ,在 及 戏 过 狂 中 ， 通 过 屏幕 甬 控 实现 葬 、 跳 等 动作 的 互动 ， 操 控 按 角 分布 在 屏幕 左 
右 两 边 ， 便 于 TRE, 分 值 时 间 等 信息 位 于 屏幕 上 方 ， 这 是 游戏 界面 的 一 般 布 局 ， 增 强 了 
玩 者 的 体验 感 。 

6.3.2 课题 二 :“ 雾 圳 小 怪兽 ”游戏 

在 “城市 更 美好 ”的 主题 下 创作 的 这 款 “ 雾 霓 小 怪兽 ”游戏 ， 目 的 是 希望 通过 趣味 化 的 
方式 让 人 们 了 解 雾 卉 ， 驱 赶 “ 雾 者 怪兽 " ， 还 城市 一 片 蓝天 (图 623) 。 

点 评 : 体验 这 款 小 游戏 不 但 能 够 增加 预防 老 堆 的 知识 ， 还 能 够 起 到 缓解 压力 的 作用 ， 用 
户 通过 屏幕 点 击 、 拖 搜 等 动作 实现 了 较 好 的 互动 ， 其 实 类 似 互 动手 法 的 游戏 已 经 有 很 多 ， 
如 切 水 果 、 愤 想 的 小 鸟 等 ， 不同 的 内 容 设 计 、 场 景 设计 能 创造 出 不 同 的 体验 感受 。 在 流 
程 设计 上 ， 还 应 多 些 夺 妙 的 构思 ， 将 屏幕 交互 行为 更 好 地 融入 游戏 故事 情节 中 ， 才 能 激发 人 
们 的 兴趣 。 








an wisdom 
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